<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-sm-12"> <h3>User Comment Example</h3> </div><!-- /col-sm-12 --> </div><!-- /row --> <div class="row"> <div class="col-sm-1"> <div class="thumbnail"> <img class="img-responsive user-photo" src="https://ssl.gstatic.com/accounts/ui/avatar_2x.png"> </div><!-- /thumbnail --> </div><!-- /col-sm-1 --> <div class="col-sm-5"> <div class="panel panel-comment panel-default "> <div class="panel-heading-comment panel-heading"> <strong>myusername</strong> <span class="text-muted">commented 5 days ago</span> </div> <div class="panel-body"> Panel content </div><!-- /panel-body --> </div><!-- /panel panel-default --> <div class="row"> <div class="col-sm-2"> <div class="thumbnail"> <img class="img-responsive user-photo" src="https://ssl.gstatic.com/accounts/ui/avatar_2x.png"> </div><!-- /thumbnail --> </div><!-- /col-sm-1 --> <div class="col-sm-10"> <div class="panel panel-comment panel-default"> <div class="panel-heading-comment panel-heading"> <strong>myusername</strong> <span class="text-muted">commented 5 days ago</span> </div> <div class="panel-body"> Panel content </div><!-- /panel-body --> </div><!-- /panel panel-default --> </div><!-- /col-sm-5 --> </div><!-- /row --> </div><!-- /col-sm-5 --> </div><!-- /row --> <div class="row"> <div class="col-sm-1"> <div class="thumbnail"> <img class="img-responsive user-photo" src="https://ssl.gstatic.com/accounts/ui/avatar_2x.png"> </div><!-- /thumbnail --> </div><!-- /col-sm-1 --> <div class="col-sm-5"> <div class="panel panel-comment panel-default"> <div class="panel-heading-comment panel-heading"> <strong>myusername</strong> <span class="text-muted">commented 5 days ago</span> </div> <div class="panel-body"> Panel content </div><!-- /panel-body --> </div><!-- /panel panel-default --> <div class="row"> <div class="col-sm-2"> <div class="thumbnail"> <img class="img-responsive user-photo" src="https://ssl.gstatic.com/accounts/ui/avatar_2x.png"> </div><!-- /thumbnail --> </div><!-- /col-sm-1 --> <div class="col-sm-10"> <div class="panel panel-comment panel-default"> <div class="panel-heading-comment panel-heading"> <strong>myusername</strong> <span class="text-muted">commented 5 days ago</span> </div> <div class="panel-body"> Panel content </div><!-- /panel-body --> </div><!-- /panel panel-default --> </div><!-- /col-sm-5 --> </div><!-- /row --> </div><!-- /container -->

.panel-comment { position:relative; } .panel>.panel-heading-comment:after,.panel>.panel-heading-comment:before{ position:absolute; top:11px;left:-16px; right:100%; width:0; height:0; display:block; content:" "; border-color:transparent; border-style:solid solid outset; pointer-events:none; } .panel>.panel-heading-comment:after{ border-width:7px; border-right-color:#f7f7f7; margin-top:1px; margin-left:2px; } .panel>.panel-heading-comment:before{ border-right-color:#ddd; border-width:8px; }