<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 ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css"> <div class="container"> <div class="row d-flex align-items-center"> <div class="col-md-6 comments-section"> <!--====COMMENT AREA START====--> <div class="row"> <div class="col-12"> <h2>Comments</h2> <form class="comment-form" method="post" action=""> <textarea class="comment-area" name="user_comment" placeholder="Write your comment here" ></textarea> <button type="submit" class="btn comment-btn">Post</button> </form> </div> </div> <!-- =======COMMENTS START=======--> <div class="row"> <div class="col-12"> <div class="comment-box-wrapper"> <div class="comment-box"> <img src="https://cdn.pixabay.com/photo/2017/04/06/19/34/girl-2209147_960_720.jpg" class="commenter-image" alt="commenter_image"> <div class="comment-content"> <div class="commenter-head"><span class="commenter-name"><a href="" >Eliza Gautam</a></span> <span class="comment-date"><i class="far fa-clock"></i>2 days ago</span></div> <div class="comment-body"> <span class="comment">This is comment content Here is nice comment And you are beautiful</span> </div> <div class="comment-footer"> <span class="comment-likes">55 <a href="" class="comment-action active"> <i class="far fa-heart"></i></a></span> <span class="comment-reply">66 <a href="" class="comment-action">Replies</a></span> </div> </div> </div> <div class="nested-comments"> <div class="comment-box-wrapper"> <div class="comment-box"> <img src="https://cdn.pixabay.com/photo/2017/04/06/19/34/girl-2209147_960_720.jpg" class="commenter-image" alt="commenter_image"> <div class="comment-content"> <div class="commenter-head"><span class="commenter-name"><a href="" >Eliza Gautam</a></span> <span class="comment-date"><i class="far fa-clock"></i>2 days ago</span></div> <div class="comment-body"> <span class="comment">This is comment content Here is nice comment</span> </div> <div class="comment-footer"> <span class="comment-likes">55 <a href="" class="comment-action active"> <i class="far fa-heart"></i></a></span> <span class="comment-reply">66 <a href="" class="comment-action">Reply</a></span> </div> </div> </div> </div> <div class="comment-box-wrapper"> <div class="comment-box"> <img src="https://cdn.pixabay.com/photo/2017/04/06/19/34/girl-2209147_960_720.jpg" class="commenter-image" alt="commenter_image"> <div class="comment-content"> <div class="commenter-head"><span class="commenter-name"><a href="" >Eliza Gautam</a></span> <span class="comment-date"><i class="far fa-clock"></i>2 days ago</span></div> <div class="comment-body"> <span class="comment">This is comment content Here is nice comment</span> </div> <div class="comment-footer"> <span class="comment-likes">55 <a href="" class="comment-action active"> <i class="far fa-heart"></i></a></span> <span class="comment-reply">66 <a href="" class="comment-action">Reply</a></span> </div> </div> </div> </div> </div> </div> <div class="comment-box-wrapper"> <div class="comment-box"> <img src="https://cdn.pixabay.com/photo/2017/04/06/19/34/girl-2209147_960_720.jpg" class="commenter-image" alt="commenter_image"> <div class="comment-content"> <div class="commenter-head"><span class="commenter-name"><a href="" >Eliza Gautam</a></span> <span class="comment-date"><i class="far fa-clock"></i>2 days ago</span></div> <div class="comment-body"> <span class="comment">This is comment content Here is nice comment</span> </div> <div class="comment-footer"> <span class="comment-likes">55 <a href="" class="comment-action active"> <i class="far fa-heart"></i></a></span> <span class="comment-reply">66 <a href="" class="comment-action">Reply</a></span> </div> </div> </div> </div> </div> </div> </div> </div> </div>

body{ background : red ; margin:10px 10px; } .comments-section{ background:#fff; } .comment-area{ background: none repeat scroll 0 0 #fff; border: medium none; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; -ms-border-radius: 4px 4px 0 0; -o-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; color: #777777; float: left; font-family: Lato; font-size: 14px; height: 85px; letter-spacing: 0.3px; padding: 10px 20px; width: 100%; resize:vertical; outline:none; border: 1px solid #F2F2F2; } .comment-btn{ float: right; background: #4CAF50; margin: 5px 0; padding: 6px 15px; color: #fff; letter-spacing: 1.5px; outline: none; border-radius: 4px; box-shadow:none; } .comment-btn:hover , .comment-btn:focus { background:#2E7D32; outline: none; border-radius: 4px; box-shadow:none; } .comment-box-wrapper{ display:flex; flex-direction:column; width:100%; margin:5px 0px; } .comment-box{ display:flex; width:100%; } .comment-box a{ color:#242475; } .commenter-image{ height:40px; width:40px; border-radius:50%; } .comment-content{ display:flex; flex-direction:column; background:#f2f3f5; margin-left:5px; padding:4px 20px; border-radius:10px; } .commenter-head{ display:block; } .commenter-head .commenter-name{ font-size:0.9rem; font-weight:600; } .comment-date{ font-size:0.7rem; } .comment-date i { margin:0 5px 0 10px; } .comment-body{ padding:0 0 0 5px; display:flex; font-size:1rem; font-size:0.8rem; font-weight:400; } .comment-footer{ font-size:0.8rem; font-weight:600; } .comment-footer span{ margin:0 15px 0 0; } .comment-footer span a{ margin:0 0px 0 2px; } .comment-footer span.comment-likes .active .fa-heart{ color:black; font-size:1rem; } .comment-footer span.comment-likes .active .fa-heart{ color:red; } .nested-comments{ margin-left:50px; }

function myFunction(x) { x.classList.toggle("fa-thumbs-down"); }