<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Vega</a> </div> </div><!-- /.container-fluid --> </nav> <div class="container"> <div class="row"> <div class="panel panel-default text-center"> <div class="panel-body"> <div class="btn-group-vertical pull-right" role="group" aria-label="..."> <button type="button" class="btn btn-sm btn-default"><span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span> ESCALATE</button> <button type="button" class="btn btn-sm btn-default"><span class="glyphicon glyphicon-step-forward" aria-hidden="true"></span> SKIP</button> </div> <h2>When was the <code>Black Toner</code> last ordered?</h2> <small>Unable to identify when the last Black Toner was ordered for this device.</small> <a target="_blank" href="#" type="button" class="btn btn-sm">View in XSM</a> <hr /> <div class="col-md-6 mycontent-left"> <p><span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span></p> <h4>No previous orders</h4> </div> <div class="col-md-6"> <table class="table table-bordered table-striped"> <thead> <tr> <th colspan="7" class="text-center"> <span class="btn-group"> <a class="btn"><i class="icon-chevron-left"><</i></a> <btn class="btn">February 2012</btn> <a class="btn"><i class="icon-chevron-right">></i></a> </span> </th> </tr> <tr> <th class="text-center">Su</th> <th class="text-center">Mo</th> <th class="text-center">Tu</th> <th class="text-center">We</th> <th class="text-center">Th</th> <th class="text-center">Fr</th> <th class="text-center">Sa</th> </tr> </thead> <tbody> <tr> <td class="muted">29</td> <td class="muted">30</td> <td class="muted">31</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> </tr> <tr> <td>12</td> <td>13</td> <td>14</td> <td>15</td> <td>16</td> <td>17</td> <td>18</td> </tr> <tr> <td>19</td> <td class="btn-primary"><strong>20</strong></td> <td>21</td> <td>22</td> <td>23</td> <td>24</td> <td>25</td> </tr> <tr> <td>26</td> <td>27</td> <td>28</td> <td>29</td> <td class="muted">1</td> <td class="muted">2</td> <td class="muted">3</td> </tr> </tbody> </table> <form class="form-inline"> <div class="form-group"> <label for="#"><h4>Ordered on the </h4></label> <input type="date" class="form-control" id="#" disabled> </div> </form> </div> </div> <div class="panel-footer"> <button class="btn btn-default" type="submit">Save</button> </div> </div> </div> <div class="row"> <div class="panel panel-default text-center"> <div class="panel-body"> <div class="btn-group-vertical pull-right" role="group" aria-label="..."> <button type="button" class="btn btn-sm btn-default"><span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span> ESCALATE</button> <button type="button" class="btn btn-sm btn-default"><span class="glyphicon glyphicon-step-forward" aria-hidden="true"></span> SKIP</button> </div> <h2>When was the <code>Black Toner</code> last ordered?</h2> <small>Unable to identify when the last Black Toner was ordered for this device.</small> <a target="_blank" href="#" type="button" class="btn btn-sm">View in XSM</a> <hr /> <div class="col-md-6 mycontent-left"> <p><span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span></p> <h4>No previous orders</h4> </div> <div class="col-md-6"> <table class="table table-bordered table-striped"> <thead> <tr> <th colspan="7" class="text-center"> <span class="btn-group"> <a class="btn"><i class="icon-chevron-left"><</i></a> <btn class="btn">February 2012</btn> <a class="btn"><i class="icon-chevron-right">></i></a> </span> </th> </tr> <tr> <th class="text-center">Su</th> <th class="text-center">Mo</th> <th class="text-center">Tu</th> <th class="text-center">We</th> <th class="text-center">Th</th> <th class="text-center">Fr</th> <th class="text-center">Sa</th> </tr> </thead> <tbody> <tr> <td class="muted">29</td> <td class="muted">30</td> <td class="muted">31</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> </tr> <tr> <td>12</td> <td>13</td> <td>14</td> <td>15</td> <td>16</td> <td>17</td> <td>18</td> </tr> <tr> <td>19</td> <td class="btn-primary"><strong>20</strong></td> <td>21</td> <td>22</td> <td>23</td> <td>24</td> <td>25</td> </tr> <tr> <td>26</td> <td>27</td> <td>28</td> <td>29</td> <td class="muted">1</td> <td class="muted">2</td> <td class="muted">3</td> </tr> </tbody> </table> <form class="form-inline"> <div class="form-group"> <label for="#"><h4>Ordered on the </h4></label> <input type="date" class="form-control" id="#" disabled> </div> </form> </div> </div> <div class="panel-footer"> <button class="btn btn-default" type="submit">Save</button> </div> </div> </div> </div>

body { padding: 70px 0px; } .mycontent-left { border-right: 1px solid #eee; height:340px; cursor:pointer; } .mycontent-left h4{ display: inline-block; margin-top:112px; } .mycontent-left .glyphicon{ font-size: 80px; margin-top:100px; }