<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>
<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>
