"User Comment Example"
Bootstrap 3.2.0 Snippet by jasonsyko

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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-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; }

Related: See More


Questions / Comments:

Excellent, simple and easy!

miguelangelmagdalena (-1) - 8 months ago - Reply -1


hey there buddy

Bobby () - 1 year ago - Reply 0


my test

sdad () - 1 year ago - Reply 0


test

ok () - 1 year ago - Reply 0


fgsdfgsdg

dfgdsfg () - 1 year ago - Reply 0


Hallo,
wie geht es

dfgdfgdfgdfg () - 1 year ago - Reply 0


what is this?

Adam () - 1 year ago - Reply 0


test

test () - 1 year ago - Reply 0


tesssssstttt

testststs () - 1 year ago - Reply 0


fuck you man

Seniorbutts () - 1 year ago - Reply 0


another one!

Seniorbutts () - 1 year ago - Reply 0


How far will it nest?

assssssss () - 1 year ago - Reply 0


test

sadf () - 1 year ago - Reply 0


teststas

af () - 2 years ago - Reply 0


tada

mama () - 2 years ago - Reply 0


Tests

sawaasa () - 2 years ago - Reply 0


sdfgdfgdfg

fdgdfgfdg () - 2 years ago - Reply 0


Good evening! How do I create a comment system , like this one page that I am using ? Does anyone have any tutorial to indicate ?

Alessandro Nazário () - 2 years ago - Reply 0


very useful. Thanks . Keep it up.

Joshy Francis () - 2 years ago - Reply 0


Exactly the way i was looking for.
But where is the little arrow???
i want to change the color

onigetoc () - 2 years ago - Reply 0


.panel>.panel-heading:after { border-right-color: #f7f7f7 } // This is background of arrow
.panel>.panel-heading:before { border-right-color: #cacaca; } // This is the border of arrow.

Eugine Joseph () - 1 year ago - Reply 0


nice

allen () - 2 years ago - Reply 0


very helpful

Raymond Zhang () - 3 years ago - Reply 0


Yes

田鲁 () - 3 years ago - Reply 0


nice design thumbs Up mt http://www.mirchu.net/ Team

Mirchu () - 3 years ago - Reply 0


agaga

aa () - 2 years ago - Reply 0