"User Comment Example"
Bootstrap 3.2.0 Snippet by jasonsyko

<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-default"> <div class="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 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-default"> <div class="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 -->
.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; }

Similar snippets: See More


Comments:

comments powered by Disqus