"Comments"
Bootstrap 3.3.0 Snippet by Besnikhetemi

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <section class="comments"> <article class="comment"> <a class="comment-img" href="#non"> <img src="https://pbs.twimg.com/profile_images/444197466133385216/UA08zh-B.jpeg" alt="" width="50" height="50"> </a> <div class="comment-body"> <div class="text"> <p>Hello, this is an example from me</p> </div> <p class="attribution">by <a href="#non">Besnik Hetemi</a> at 14:23pm, 4 Dec 2015</p> </div> </article> <article class="comment"> <a class="comment-img" href="#non"> <img src="https://pbs.twimg.com/profile_images/444197466133385216/UA08zh-B.jpeg" alt="" width="50" height="50"> </a> <div class="comment-body"> <div class="text"> <p>if you are interested for more about me visited my profile on social page</p> <p>To visit me you can click my name <a target="_blank" href="http://www.facebook.com/besnik.hetemii">Besnik Hetemi</a> and send me frends request or send me a message in inbox</p> </div> <p class="attribution">by <a href="#non">Besnik Hetemi</a> at 14:23pm, 4 Dec 2015</p> </div> </article> </section>
body { width: 500px; margin: 20px auto; font: 16px/1.4 Arial, sans-serif; background: #f3eee9; } p { margin: 0 0 1em; } .comment { overflow: hidden; padding: 0 0 1em; border-bottom: 1px solid #ddd; margin: 0 0 1em; *zoom: 1; } .comment-img { float: left; margin-right: 33px; border-radius: 5px; overflow: hidden; } .comment-img img { display: block; } .comment-body { overflow: hidden; } .comment .text { padding: 10px; border: 1px solid #e5e5e5; border-radius: 5px; background: #fff; } .comment .text p:last-child { margin: 0; } .comment .attribution { margin: 0.5em 0 0; font-size: 14px; color: #666; } /* Decoration */ .comments, .comment { position: relative; } .comments:before, .comment:before, .comment .text:before { content: ""; position: absolute; top: 0; left: 65px; } .comments:before { width: 3px; top: -20px; bottom: -20px; background: rgba(0,0,0,0.1); } .comment:before { width: 9px; height: 9px; border: 3px solid #fff; border-radius: 100px; margin: 16px 0 0 -6px; box-shadow: 0 1px 1px rgba(0,0,0,0.2), inset 0 1px 1px rgba(0,0,0,0.1); background: #ccc; } .comment:hover:before { background: orange; } .comment .text:before { top: 18px; left: 78px; width: 9px; height: 9px; border-width: 0 0 1px 1px; border-style: solid; border-color: #e5e5e5; background: #fff; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); }​

Related: See More


Questions / Comments: