<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h2>A Thread comment</h2> <div class="bolg-comment"> <ul class="main-list list-unstyled"> <li> <div class="d-flex justify-content-start"> <div class="comment-img"> <a href="#"><img class="rounded-circle d-block float-left" src="https://via.placeholder.com/150/0000FF/FFFFFF" alt=""></a> </div> <div class="d-block w-100"> <div class="comment-text ml-3 border rounded"> <p class="py-1 px-2">Lorem ipsum dolor sit amet, consectetur adipisiing elit, sed do eiusmod tempor.</p> </div> </div> </div> <ul class="list-unstyled mb-0 ml-5 py-3 px-0"> <li> <div class="d-flex justify-content-start"> <div class="comment-img"> <a href="#"><img class="rounded-circle d-block float-left" src="https://via.placeholder.com/150/00AAFF/ffffff" alt=""></a> </div> <div class="d-block w-100"> <div class="comment-text ml-3 border rounded"> <p class="py-1 px-2">Lorem ipsum dolor sit amet, consectetur adipisiing elit, sed do eiusmod tempor.</p> </div> </div> </div> </li> </ul> </li> <li> <div class="d-flex justify-content-start"> <div class="comment-img"> <a href="#"><img class="rounded-circle d-block float-left" src="https://via.placeholder.com/150/0DD0FF/FFFFFF" alt=""></a> </div> <div class="d-block w-100"> <div class="comment-text ml-3 border rounded"> <p class="py-1 px-2">Lorem ipsum dolor sit amet, consectetur adipisiing elit, sed do eiusmod tempor.</p> </div> </div> </div> </li> </ul> </div> </div>

.comment-img a img { width: 40px; } .comment-text { position:relative; } .comment-text::before { background: #cccccc none repeat scroll 0 0; content: ""; height: 14px; left: -9.5px; position: absolute; top: 10px; transform: rotate(47deg); width: 16px; } .comment-text::after { background: #fff none repeat scroll 0 0; content: ""; height: 14px; left: -8.5px; position: absolute; top: 10px; transform: rotate(47deg); width: 16px; }