<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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="col-md-5"> <div class="panel panel-default"> <div class="panel-body"> <section class="post-heading"> <div class="row"> <div class="col-md-11"> <div class="media"> <div class="media-left"> <a href="#"> <img class="media-object photo-profile" src="http://0.gravatar.com/avatar/38d618563e55e6082adf4c8f8c13f3e4?s=40&d=mm&r=g" width="40" height="40" alt="..."> </a> </div> <div class="media-body"> <a href="#" class="anchor-username"><h4 class="media-heading">Bayu Darmantra</h4></a> <a href="#" class="anchor-time">51 mins</a> </div> </div> </div> <div class="col-md-1"> <a href="#"><i class="glyphicon glyphicon-chevron-down"></i></a> </div> </div> </section> <section class="post-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras turpis sem, dictum id bibendum eget, malesuada ut massa. Ut scel erisque nulla sed luctus dapibus. Nulla sit amet mi vitae purus sol licitudin venenatis. Praesent et sem urna. Integer vitae lectus nis l. Fusce sapien ante, tristique efficitur lorem et, laoreet ornare lib ero. Nam fringilla leo orci. Vivamus semper quam nunc, sed ornare magna dignissim sed. Etiam interdum justo quis risus efficitur dictum. Nunc ut pulvinar quam. N unc mollis, est a dapibus dignissim, eros elit tempor diam, eu tempus quam felis eu velit.</p> </section> <section class="post-footer"> <hr> <div class="post-footer-option container"> <ul class="list-unstyled"> <li><a href="#"><i class="glyphicon glyphicon-thumbs-up"></i> Like</a></li> <li><a href="#"><i class="glyphicon glyphicon-comment"></i> Comment</a></li> <li><a href="#"><i class="glyphicon glyphicon-share-alt"></i> Share</a></li> </ul> </div> <div class="post-footer-comment-wrapper"> <div class="comment-form"> </div> <div class="comment"> <div class="media"> <div class="media-left"> <a href="#"> <img class="media-object photo-profile" src="http://0.gravatar.com/avatar/38d618563e55e6082adf4c8f8c13f3e4?s=40&d=mm&r=g" width="32" height="32" alt="..."> </a> </div> <div class="media-body"> <a href="#" class="anchor-username"><h4 class="media-heading">Media heading</h4></a> <a href="#" class="anchor-time">51 mins</a> </div> </div> </div> </div> </section> </div> </div> </div> </div>

/*-- Global Selectors --*/ a{ color:#47649F; } body{ font-family:'helvetica'; } /*-- Bootstrap Override Style --*/ /*-- Content Style --*/ .post-footer-option li{ float:left; margin-right:50px; padding-bottom:15px; } .post-footer-option li a{ color:#AFB4BD; font-weight:500; font-size:1.3rem; } .photo-profile{ border:1px solid #DDD; } .anchor-username h4{ font-weight:bold; } .anchor-time{ color:#ADB2BB; font-size:1.2rem; } .post-footer-comment-wrapper{ background-color:#F6F7F8; }