"Comment Posts Layout"
Bootstrap 3.2.0 Snippet by andrewnite

<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-md-8"> <h2 class="page-header">Comments</h2> <section class="comment-list"> <!-- First Comment --> <article class="row"> <div class="col-md-2 col-sm-2 hidden-xs"> <figure class="thumbnail"> <img class="img-responsive" src="http://www.tangoflooring.ca/wp-content/uploads/2015/07/user-avatar-placeholder.png" /> <figcaption class="text-center">username</figcaption> </figure> </div> <div class="col-md-10 col-sm-10"> <div class="panel panel-default arrow left"> <div class="panel-body"> <header class="text-left"> <div class="comment-user"><i class="fa fa-user"></i> That Guy</div> <time class="comment-date" datetime="16-12-2014 01:05"><i class="fa fa-clock-o"></i> Dec 16, 2014</time> </header> <div class="comment-post"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <p class="text-right"><a href="#" class="btn btn-default btn-sm"><i class="fa fa-reply"></i> reply</a></p> </div> </div> </div> </article> <!-- Second Comment Reply --> <article class="row"> <div class="col-md-2 col-sm-2 col-md-offset-1 col-sm-offset-0 hidden-xs"> <figure class="thumbnail"> <img class="img-responsive" src="http://www.tangoflooring.ca/wp-content/uploads/2015/07/user-avatar-placeholder.png" /> <figcaption class="text-center">username</figcaption> </figure> </div> <div class="col-md-9 col-sm-9"> <div class="panel panel-default arrow left"> <div class="panel-heading right">Reply</div> <div class="panel-body"> <header class="text-left"> <div class="comment-user"><i class="fa fa-user"></i> That Guy</div> <time class="comment-date" datetime="16-12-2014 01:05"><i class="fa fa-clock-o"></i> Dec 16, 2014</time> </header> <div class="comment-post"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <p class="text-right"><a href="#" class="btn btn-default btn-sm"><i class="fa fa-reply"></i> reply</a></p> </div> </div> </div> </article> <!-- Third Comment --> <article class="row"> <div class="col-md-10 col-sm-10"> <div class="panel panel-default arrow right"> <div class="panel-body"> <header class="text-right"> <div class="comment-user"><i class="fa fa-user"></i> That Guy</div> <time class="comment-date" datetime="16-12-2014 01:05"><i class="fa fa-clock-o"></i> Dec 16, 2014</time> </header> <div class="comment-post"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <p class="text-right"><a href="#" class="btn btn-default btn-sm"><i class="fa fa-reply"></i> reply</a></p> </div> </div> </div> <div class="col-md-2 col-sm-2 hidden-xs"> <figure class="thumbnail"> <img class="img-responsive" src="http://www.tangoflooring.ca/wp-content/uploads/2015/07/user-avatar-placeholder.png" /> <figcaption class="text-center">username</figcaption> </figure> </div> </article> <!-- Fourth Comment --> <article class="row"> <div class="col-md-2 col-sm-2 hidden-xs"> <figure class="thumbnail"> <img class="img-responsive" src="http://www.tangoflooring.ca/wp-content/uploads/2015/07/user-avatar-placeholder.png" /> <figcaption class="text-center">username</figcaption> </figure> </div> <div class="col-md-10 col-sm-10 col-xs-12"> <div class="panel panel-default arrow left"> <div class="panel-body"> <header class="text-left"> <div class="comment-user"><i class="fa fa-user"></i> That Guy</div> <time class="comment-date" datetime="16-12-2014 01:05"><i class="fa fa-clock-o"></i> Dec 16, 2014</time> </header> <div class="comment-post"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <p class="text-right"><a href="#" class="btn btn-default btn-sm"><i class="fa fa-reply"></i> reply</a></p> </div> </div> </div> </article> <!-- Fifth Comment --> <article class="row"> <div class="col-md-10 col-sm-10"> <div class="panel panel-default arrow right"> <div class="panel-body"> <header class="text-right"> <div class="comment-user"><i class="fa fa-user"></i> That Guy</div> <time class="comment-date" datetime="16-12-2014 01:05"><i class="fa fa-clock-o"></i> Dec 16, 2014</time> </header> <div class="comment-post"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <p class="text-right"><a href="#" class="btn btn-default btn-sm"><i class="fa fa-reply"></i> reply</a></p> </div> </div> </div> <div class="col-md-2 col-sm-2 hidden-xs"> <figure class="thumbnail"> <img class="img-responsive" src="http://www.tangoflooring.ca/wp-content/uploads/2015/07/user-avatar-placeholder.png" /> <figcaption class="text-center">username</figcaption> </figure> </div> </article> <!-- Sixth Comment Reply --> <article class="row"> <div class="col-md-9 col-sm-9 col-md-offset-1 col-md-pull-1 col-sm-offset-0"> <div class="panel panel-default arrow right"> <div class="panel-heading">Reply</div> <div class="panel-body"> <header class="text-right"> <div class="comment-user"><i class="fa fa-user"></i> That Guy</div> <time class="comment-date" datetime="16-12-2014 01:05"><i class="fa fa-clock-o"></i> Dec 16, 2014</time> </header> <div class="comment-post"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <p class="text-right"><a href="#" class="btn btn-default btn-sm"><i class="fa fa-reply"></i> reply</a></p> </div> </div> </div> <div class="col-md-2 col-sm-2 col-md-pull-1 hidden-xs"> <figure class="thumbnail"> <img class="img-responsive" src="http://www.tangoflooring.ca/wp-content/uploads/2015/07/user-avatar-placeholder.png" /> <figcaption class="text-center">username</figcaption> </figure> </div> </article> </section> </div> </div> </div>
/*font Awesome http://fontawesome.io*/ @import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css); /*Comment List styles*/ .comment-list .row { margin-bottom: 0px; } .comment-list .panel .panel-heading { padding: 4px 15px; position: absolute; border:none; /*Panel-heading border radius*/ border-top-right-radius:0px; top: 1px; } .comment-list .panel .panel-heading.right { border-right-width: 0px; /*Panel-heading border radius*/ border-top-left-radius:0px; right: 16px; } .comment-list .panel .panel-heading .panel-body { padding-top: 6px; } .comment-list figcaption { /*For wrapping text in thumbnail*/ word-wrap: break-word; } /* Portrait tablets and medium desktops */ @media (min-width: 768px) { .comment-list .arrow:after, .comment-list .arrow:before { content: ""; position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent; } .comment-list .panel.arrow.left:after, .comment-list .panel.arrow.left:before { border-left: 0; } /*****Left Arrow*****/ /*Outline effect style*/ .comment-list .panel.arrow.left:before { left: 0px; top: 30px; /*Use boarder color of panel*/ border-right-color: inherit; border-width: 16px; } /*Background color effect*/ .comment-list .panel.arrow.left:after { left: 1px; top: 31px; /*Change for different outline color*/ border-right-color: #FFFFFF; border-width: 15px; } /*****Right Arrow*****/ /*Outline effect style*/ .comment-list .panel.arrow.right:before { right: -16px; top: 30px; /*Use boarder color of panel*/ border-left-color: inherit; border-width: 16px; } /*Background color effect*/ .comment-list .panel.arrow.right:after { right: -14px; top: 31px; /*Change for different outline color*/ border-left-color: #FFFFFF; border-width: 15px; } } .comment-list .comment-post { margin-top: 6px; }

Related: See More


Questions / Comments:

tnx

john () - 8 years ago - Reply 0


I want to write the same for https://webtop10.net, help me!

leagentran () - 4 years ago - Reply 0


sir i need comment system using php and js...

please sir help me...sir

thanks in advance if you help me

jugalfas () - 4 years ago - Reply 0


Hey jugalfas,

Are you asking for a PHP comment script with Javascript using this snippet?

If so, I might be able to write a simple script you can use to start.

andrewnite () - 4 years ago - Reply 0


very nice. Thanks

Joshy Francis () - 7 years ago - Reply 0


Nice article

THUTHUATVIP.COM () - 8 years ago - Reply 0