<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"> <div class="row"> <div class="col-md-12"> <h3>Collapsible Panels with nav icon and various content</h3> </div> </div> <div class="row"> <div class="col-md-6"> <div class="panel panel-primary"> <div class="panel-heading clearfix">Panel title (with paragraphs inside) <div class="pull-right"> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapse01" aria-expanded="false" aria-controls="collapse01"><i class="fa fa-bars"></i></button> </div> </div> <div class="panel-body collapse" id="collapse01"> <p>Paragraphs</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p> </div> </div> <div class="panel panel-info"> <div class="panel-heading clearfix">Panel title (with list-group inside) <div class="pull-right"> <button class="btn btn-info" type="button" data-toggle="collapse" data-target="#collapse02" aria-expanded="false" aria-controls="collapse02"><i class="fa fa-bars"></i></button> </div> </div> <div class="panel-body collapse" id="collapse02"> <p>Notice the padding inside.</p> <ul class="list-group"> <li class="list-group-item"><a href="#" role="button" class="btn btn-default btn-block">Some action</a></li> <li class="list-group-item"><a href="#" role="button" class="btn btn-default btn-block">Another action</a></li> </ul> </div> </div> <div class="panel panel-default"> <div class="panel-heading clearfix">Panel title (with paragraphs) <div class="pull-right"> <button class="btn btn-default" type="button" data-toggle="collapse" data-target="#collapse06" aria-expanded="false" aria-controls="collapse06"><i class="fa fa-bars"></i></button> </div> </div> <div class="panel-body collapse" id="collapse06"> <p>Paragraphs</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p> </div> </div> </div> <div class="col-md-6"> <div class="panel panel-success"> <div class="panel-heading clearfix">Panel title (with table inside) <div class="pull-right"> <button class="btn btn-success" type="button" data-toggle="collapse" data-target="#collapse03" aria-expanded="false" aria-controls="collapse03"><i class="fa fa-bars"></i></button> </div> </div> <div class="panel-body collapse" id="collapse03"> <table class="table"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> </div> <div class="panel panel-warning"> <div class="panel-heading clearfix">Panel title (with paragraphs) <div class="pull-right"> <button class="btn btn-warning" type="button" data-toggle="collapse" data-target="#collapse04" aria-expanded="false" aria-controls="collapse04"><i class="fa fa-bars"></i></button> </div> </div> <div class="panel-body collapse" id="collapse04"> <p>Paragraphs</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p> </div> </div> <div class="panel panel-danger"> <div class="panel-heading clearfix">Panel title (with paragraphs) <div class="pull-right"> <button class="btn btn-danger" type="button" data-toggle="collapse" data-target="#collapse05" aria-expanded="false" aria-controls="collapse05"><i class="fa fa-bars"></i></button> </div> </div> <div class="panel-body collapse" id="collapse05"> <p>Paragraphs</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p> </div> </div> </div> </div> </div>

@import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"); .container { padding: 1.6em; }