<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="comment-container"> <div class="row add-comment"> <!-- <img src="assets/popular-post/m-blog-4.jpg" class="img-circle" alt=""> --> <span class="badge">Q</span> <form action="" method="post"> <div class="form-group"> <textarea name="" id="" class="form-control" style="margin-bottom: 0" placeholder='Add a Comment... ' rows="5"></textarea> <label for="email" class="mr-1">Email (Required)</label> <input type="email" name="email" style="margin-bottom: 0;" class="form-control" id="email"> <label for="email" class="mr-1">Name (Required)</label> <input type="text" name="name" class="form-control" id="email"> <button class="form-control">Add Comment</button> </div> </form> </div> <div class="row add-comment reply-comment" style="margin-bottom: 1rem" ;> <!-- <img src="assets/popular-post/m-blog-4.jpg" class="img-circle" alt=""> --> <span class="badge">Q</span> <div class="form-group"> <textarea name="" id="" readonly class="form-control" rows="5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio voluptatibus quo perspiciatis, provident cumque corrupti natus sapiente obcaecati vel placeat. Sapiente, expedita.</textarea> <span class="reply-comment-span"><a>reply</a>. <a>Share</a>. 100 likes </span><a><i class="fas fa-lg fa-thumbs-up"></i> </a>  <a><i class="fas fa-lg fa-thumbs-down"></i></a> </div> </div> <div class="row add-comment reply-comment col-md-offset-1"> <!-- <img src="assets/popular-post/m-blog-4.jpg" class="img-circle" alt=""> --> <span class="badge">Q</span> <div class="form-group"> <form action="" method="post"> <div class="form-group"> <textarea name="" id="" class="form-control" placeholder='Reply a Comment... ' rows="5"></textarea> <button class="btn" class="form-control">Reply Comment</button> </div> </form> </div> </div> </div> </div>

/* comments */ .comment-container { margin-top: 1em; display:flex; font-family: var(--Abeez); flex-direction: column; align-items: flex-start; } .comment-container .add-comment{ display: flex; background:#eee; padding: .5em; align-items: flex-start; justify-content: space-between; border: 1px solid gray; margin-bottom: 2rem; } .comment-container .add-comment textarea, .comment-container .add-comment input{ width: 70vh; padding: .5em; margin-bottom: 2rem; margin-left: 1rem; resize:none; } .mr-1{ margin-left: 1rem; } .p-0{ padding:0; } .comment-container .add-comment button{ background: #4EC5F1; padding: .5em; font-family: var(--Abeez); width: 70vh; margin-left: 1rem; } .comment-container .add-comment button:hover{ background:#1073d5; } .comment-container .badge{ height: 8vh; width: 8vh; border-radius: 50px; background:#eee; border: 1px solid gray; font-size: 3em; color:black; } .comment-container .reply-comment textarea{ color:black; outline:none; cursor:auto; } .comment-container .reply-comment .reply-comment-span{ padding: 2rem; color: gray; } .comment-container .reply-comment .fa{ font-size: 2em; } .comment-container a{ cursor: pointer; } .comment-container a:hover{ color:#1073d5; text-decoration:none; } .comment-container img{ height: 8vh; width: 8vh; }