"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:

Mirchu 2015-02-17 06:22:49
    nice design thumbs Up mt http://www.mirchu.net/ Team
aa 2016-08-29 12:08:33
    agaga
Raymond Zhang 2015-09-09 03:09:21
    very helpful
田鲁 2015-10-03 10:32:57
    Yes
allen 2015-12-21 13:22:27
    nice
onigetoc 2015-12-23 02:34:26
    Exactly the way i was looking for.
But where is the little arrow???
i want to change the color
Eugine Joseph 2017-02-07 04:21:24
    .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.
Joshy Francis 2016-04-05 10:21:15
    very useful. Thanks . Keep it up.
Alessandro Nazário 2016-04-29 00:35:55
    Good evening! How do I create a comment system , like this one page that I am using ? Does anyone have any tutorial to indicate ?
fdgdfgfdg 2016-05-19 10:18:30
    sdfgdfgdfg
sawaasa 2016-07-17 08:28:25
    Tests
mama 2016-07-19 13:55:03
    tada
af 2016-07-29 08:27:19
    teststas
sadf 2017-02-01 20:51:02
    test
test 2017-02-27 21:40:57
    test
testststs 2017-06-01 17:48:39
    tesssssstttt
Seniorbutts 2017-06-01 17:48:59
    another one!
assssssss 2017-06-01 17:49:19
    How far will it nest?
Seniorbutts 2017-06-01 17:49:40
    fuck you man
Adam 2017-03-17 05:08:46
    what is this?
dfgdfgdfgdfg 2017-04-01 09:17:19
    Hallo,
wie geht es
ok 2017-05-16 11:45:19
    test
dfgdsfg 2017-05-16 11:46:10
    fgsdfgsdg
sdad 2017-05-16 12:25:30
    my test
Bobby 2017-06-01 21:13:41
    hey there buddy

Commenting will be back soon.