<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="panel panel-default"> <!-- Default panel contents --> <div class="panel-heading"> Panel heading <span class="pull-right"><i class="glyphicon glyphicon-chevron-right"></i></span> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac posuere enim. Sed lorem ex, maximus egestas ornare at, tristique id est. Proin augue risus, tincidunt nec augue sed, aliquam rutrum ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean quis lorem ut ex volutpat ultrices. Nulla vestibulum libero velit, nec interdum metus molestie a. Donec rutrum, massa sit amet pellentesque ornare, quam tortor egestas metus, vulputate malesuada justo enim sed metus. Curabitur in turpis a metus malesuada dapibus fermentum et nisi. Donec ornare ligula lacus, a scelerisque turpis varius a. Morbi sed dolor ac nisl ullamcorper luctus ac ut erat. Duis non eleifend orci. Integer vitae elit ultricies, pellentesque sapien in, molestie arcu. Vivamus turpis leo, consequat eu efficitur sed, sodales sit amet sem.</p> </div> </div> <div class="row"> <div class="panel panel-default"> <!-- Default panel contents --> <div class="panel-heading"> Panel heading <span class="pull-right"><i class="glyphicon glyphicon-chevron-right"></i></span> </div> <button class="btn btn-primary" type="button"> Messages <span class="badge">4</span> </button> </div> </div> </div>