<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-5"> <div class="panel panel-default"> <div class="panel-heading"> <strong>John Doe</strong> <span class="text-muted">commented 5 days ago </span> <span class="label label-info">Report</span><span class="label label-info">AMEA</span><span class="label label-info">AU</span> </div> <div class="panel-body"> Lorem ipsum dolor </div><!-- /panel-body --> </div><!-- /panel panel-default --> </div><!-- /col-sm-6 --> </div><!-- /row --> <div class="row"> <div class="col-sm-5"> <div class="panel panel-default"> <div class="panel-heading"> <strong>John Doe</strong> <span class="text-muted">on 7/6/2017, 7:48:32 AM </span> <div class="action"> <button type="button" class="btn btn-primary btn-xs" title="Edit"> <span class="glyphicon glyphicon-pencil"></span> </button> <button type="button" class="btn btn-danger btn-xs" title="Delete"> <span class="glyphicon glyphicon-trash"></span> </button> </div> <div> <span class="label label-info">Report</span><span class="label label-info">AMEA</span><span class="label label-info">AU</span> </div> </div> <div class="panel-body"> Lorem ipsum dolor sit amet, sea ex audiam sanctus copiosae, vel ne aliquam delicata suscipiantur. Ea has idque elitr vituperatoribus, nec ei enim omnis accommodare. Ut sea erat definitionem. Ut qui veniam mentitum, pri ut putent signiferumque, quis lorem regione qui at. Possim persecuti delicatissimi sit ea. Qualisque necessitatibus et est, cu novum scribentur ius. </div><!-- /panel-body --> </div><!-- /panel panel-default --> </div><!-- /col-sm-6 --> </div><!-- /container -->

.thumbnail { padding:0px; } .panel { position:relative; } .panel>.panel-heading:after,.panel>.panel-heading: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:after{ border-width:7px; border-right-color:#f7f7f7; margin-top:1px; margin-left:2px; } .panel>.panel-heading:before{ border-right-color:#ddd; border-width:8px; } .label{ margin:0 2px; } .action{ float:right; }