"Comment Posts Layout"
Bootstrap 3.2.0 Snippet by amalahussein

<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"> <article class="row"> <div class="col-md-2 col-sm-2 hidden-xs"> <img class="img-responsive img-circle" src="http://www.keita-gaming.com/assets/profile/default-avatar-c5d8ec086224cb6fc4e395f4ba3018c2.jpg" /> </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">That Guy</div> <time class="comment-date" datetime="16-12-2014 01:05"><i class="glyphicon glyphicon-time"></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> </div> </div> </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 .row { margin-bottom: 0px; } .comment .panel .panel-heading { padding: 4px 15px; position: absolute; border:none; /*Panel-heading border radius*/ border-top-right-radius:0px; top: 1px; } .comment .panel .panel-heading.right { border-right-width: 0px; /*Panel-heading border radius*/ border-top-left-radius:0px; right: 16px; } .comment .panel .panel-heading .panel-body { padding-top: 6px; } .comment figcaption { /*For wrapping text in thumbnail*/ word-wrap: break-word; } /* Portrait tablets and medium desktops */ @media (min-width: 768px) { .comment .arrow:after, .comment .arrow:before { content: ""; position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent; } .comment .panel.arrow.left:after, .comment .panel.arrow.left:before { border-left: 0; } /*****Left Arrow*****/ /*Outline effect style*/ .comment .panel.arrow.left:before { left: 0px; top: 30px; /*Use boarder color of panel*/ border-right-color: inherit; border-width: 16px; } /*Background color effect*/ .comment .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 .panel.arrow.right:before { right: -16px; top: 30px; /*Use boarder color of panel*/ border-left-color: inherit; border-width: 16px; } /*Background color effect*/ .comment .panel.arrow.right:after { right: -14px; top: 31px; /*Change for different outline color*/ border-left-color: #FFFFFF; border-width: 15px; } } .comment .comment-post { margin-top: 6px; }

Related: See More


Questions / Comments: