<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 ----------> <div class="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> </div> </div> <div class="comment-box"> <div class="heading"> <img src="http://images.techtimes.com/data/images/full/149234/addy-miller.jpg" alt="emy"> </div> <div class="content"> <div class="h-in"> <div class="cont"> <strong><a class="pull-left" href="https://www.facebook.com/Djelfanetwork/">Eman Salah </a></strong> <small class="pull-right">23-08-2017</small> <br> </div > <p>Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction </p> </div> <div class="c-f"> <a href="https://www.facebook.com/Djelfanetwork/" class="btn btn-xs"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a> <a href="https://www.facebook.com/Djelfanetwork/" class="btn btn-primary btn-xs ">replay</a> <small>- 5 min</small> </div> </div> </div>

.comment-box{ margin: 100px; border: 1px solid #ddd ; width: 400px; position: relative; background: #fff ; border-radius: 0px 10px 10px 10px ; display: inline-flex; } .comment-box> p { padding: 5px 10px ; } .heading{ width: auto; display: -webkit-box; margin: 0px 4px 0 0px; } .heading> img{ width: 50px ; border-radius: 0px 50% 0% 50% ; } .heading> a{ text-decoration: none; color: blue ; } .heading> .h-in { margin: 1px 5px ; width: 85% ; } .h-in> p { padding: 0 3px 0 0; } .cont{ margin: 4px 5px 0px 0; } .c-f{ margin-bottom: 5px; } .c-f > a:first-child{ color: red ; border: 1px solid red; } .c-f > a > .glyphicon:first-child{ top:3px; } .c-f > .btn { border-radius: 30px; }