<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 ----------> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="row"> <div class="col-md-4"> <span class="label label-default">Label</span> <div class="row"> <div class="col-md-12"> <img alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" /> </div> </div> <table class="table table-hover table-bordered"> <thead> <tr> <th> Payment Taken </th> <th> Status </th> </tr> </thead> <tbody> <tr> <td> 01/04/2012 </td> <td> Default </td> </tr> <tr class="active"> <td> 01/04/2012 </td> <td> Approved </td> </tr> <tr class="success"> <td> 02/04/2012 </td> <td> Declined </td> </tr> <tr class="warning"> <td> 03/04/2012 </td> <td> Pending </td> </tr> <tr class="danger"> <td> 04/04/2012 </td> <td> <address> <strong>Twitter, Inc.</strong><br /> 795 Folsom Ave, Suite 600<br /> San Francisco, CA 94107<br /> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> </td> </tr> </tbody> </table> <address> <strong>Twitter, Inc.</strong><br /> 795 Folsom Ave, Suite 600<br /> San Francisco, CA 94107<br /> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> </div> <div class="col-md-4"> <span class="label label-default">Label</span> <div class="panel-group" id="panel-26518"> <div class="panel panel-default"> <div class="panel-heading"> <a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-26518" href="#panel-element-281718">Collapsible Group Item #1</a> </div> <div id="panel-element-281718" class="panel-collapse collapse"> <div class="panel-body"> Anim pariatur cliche... </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <a class="panel-title" data-toggle="collapse" data-parent="#panel-26518" href="#panel-element-537871">Collapsible Group Item #2</a> </div> <div id="panel-element-537871" class="panel-collapse collapse in"> <div class="panel-body"> Anim pariatur cliche... </div> </div> </div> </div> </div> <div class="col-md-4"> <ul class="nav nav-pills"> <li class="active"> <a href="#"> <span class="badge pull-right">42</span> Home</a> </li> <li> <a href="#"> <span class="badge pull-right">16</span> More</a> </li> </ul> <div class="panel-group" id="panel-530164"> <div class="panel panel-default"> <div class="panel-heading"> <a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-530164" href="#panel-element-388851">Collapsible Group Item #1</a> </div> <div id="panel-element-388851" class="panel-collapse collapse"> <div class="panel-body"> Anim pariatur cliche... <div class="row"> <div class="col-md-12"> <ul> <li> Lorem ipsum dolor sit amet </li> <li> Consectetur adipiscing elit </li> <li> Integer molestie lorem at massa </li> <li> Facilisis in pretium nisl aliquet </li> <li> Nulla volutpat aliquam velit </li> <li> Faucibus porta lacus fringilla vel </li> <li> Aenean sit amet erat nunc </li> <li> Eget porttitor lorem </li> </ul> </div> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <a class="panel-title" data-toggle="collapse" data-parent="#panel-530164" href="#panel-element-887064">Collapsible Group Item #2</a> </div> <div id="panel-element-887064" class="panel-collapse collapse in"> <div class="panel-body"> Anim pariatur cliche... <div class="row"> <div class="col-md-12"> <ul> <li> Lorem ipsum dolor sit amet </li> <li> Consectetur adipiscing elit </li> <li> Integer molestie lorem at massa </li> <li> Facilisis in pretium nisl aliquet </li> <li> Nulla volutpat aliquam velit </li> <li> Faucibus porta lacus fringilla vel </li> <li> Aenean sit amet erat nunc </li> <li> Eget porttitor lorem </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>