Bootstrap 4 blog post comments section is a feature of any online social forum, blogs, videos vlog, and news websites where the publishers can invite the audience to view published content and comment on the content.
HTML
<div class="container">
<div class="row">
<div class="col-12">
<div class="comments">
<div class="comments-details">
<span class="total-comments comments-sort">117 Comments</span>
<span class="dropdown">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">Sort By <span class="caret"></span></button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Top Comments</a>
<a href="#" class="dropdown-item">Newest First</a>
</div>
</span>
</div>
<div class="comment-box add-comment">
<span class="commenter-pic">
<img src="/images/user-icon.jpg" class="img-fluid">
</span>
<span class="commenter-name">
<input type="text" placeholder="Add a public comment" name="Add Comment">
<button type="submit" class="btn btn-default">Comment</button>
<button type="cancel" class="btn btn-default">Cancel</button>
</span>
</div>
<div class="comment-box">
<span class="commenter-pic">
<img src="/images/user-icon.jpg" class="img-fluid">
</span>
<span class="commenter-name">
<a href="#">Happy markuptag</a> <span class="comment-time">2 hours ago</span>
</span>
<p class="comment-txt more">Suspendisse massa enim, condimentum sit amet maximus quis, pulvinar sit amet ante. Fusce eleifend dui mi, blandit vehicula orci iaculis ac.</p>
<div class="comment-meta">
<button class="comment-like"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> 99</button>
<button class="comment-dislike"><i class="fa fa-thumbs-o-down" aria-hidden="true"></i> 149</button>
<button class="comment-reply reply-popup"><i class="fa fa-reply-all" aria-hidden="true"></i> Reply</button>
</div>
<div class="comment-box add-comment reply-box">
<span class="commenter-pic">
<img src="/images/user-icon.jpg" class="img-fluid">
</span>
<span class="commenter-name">
<input type="text" placeholder="Add a public reply" name="Add Comment">
<button type="submit" class="btn btn-default">Reply</button>
<button type="cancel" class="btn btn-default reply-popup">Cancel</button>
</span>
</div>
</div>
<div class="comment-box">
<span class="commenter-pic">
<img src="/images/user-icon.jpg" class="img-fluid">
</span>
<span class="commenter-name">
<a href="#">Happy markuptag</a> <span class="comment-time">2 hours ago</span>
</span>
<p class="comment-txt more">Suspendisse massa enim, condimentum sit amet maximus quis, pulvinar sit amet ante. Fusce eleifend dui mi, blandit vehicula orci iaculis ac.</p>
<div class="comment-meta">
<button class="comment-like"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> 99</button>
<button class="comment-dislike"><i class="fa fa-thumbs-o-down" aria-hidden="true"></i> 149</button>
<button class="comment-reply"><i class="fa fa-reply-all" aria-hidden="true"></i> Reply</button>
</div>
<div class="comment-box replied">
<span class="commenter-pic">
<img src="/images/user-icon.jpg" class="img-fluid">
</span>
<span class="commenter-name">
<a href="#">Happy markuptag</a> <span class="comment-time">2 hours ago</span>
</span>
<p class="comment-txt more">Suspendisse massa enim, condimentum sit amet maximus quis, pulvinar sit amet ante. Fusce eleifend dui mi, blandit vehicula orci iaculis ac.</p>
<div class="comment-meta">
<button class="comment-like"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> 99</button>
<button class="comment-dislike"><i class="fa fa-thumbs-o-down" aria-hidden="true"></i> 149</button>
<button class="comment-reply"><i class="fa fa-reply-all" aria-hidden="true"></i> Reply</button>
</div>
<div class="comment-box replied">
<span class="commenter-pic">
<img src="/images/user-icon.jpg" class="img-fluid">
</span>
<span class="commenter-name">
<a href="#">Happy markuptag</a> <span class="comment-time">2 hours ago</span>
</span>
<p class="comment-txt more">Suspendisse massa enim, condimentum sit amet maximus quis, pulvinar sit amet ante. Fusce eleifend dui mi, blandit vehicula orci iaculis ac.</p>
<div class="comment-meta">
<button class="comment-like"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> 99</button>
<button class="comment-dislike"><i class="fa fa-thumbs-o-down" aria-hidden="true"></i> 149</button>
<button class="comment-reply"><i class="fa fa-reply-all" aria-hidden="true"></i> Reply</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>CSS
.comments-details button.btn.dropdown-toggle,
.comments-details .total-comments {
font-size: 18px;
font-weight: 500;
color: #5e5e5e;
}
.comments-details {
padding: 15px 15px;
}
.comments .comments .dropdown,
.comments .dropup {
position: relative;
}
.comments button {
background-color: transparent;
border: none;
}
.comments .comment-box {
width: 100%;
float: left;
height: 100%;
background-color: #FAFAFA;
padding: 10px 10px 10px;
margin-bottom: 15px;
border-radius: 5px;
border: 1px solid #ddd;
}
.comments .add-comment {
background-color: transparent;
border: none;
position: relative;
margin-bottom: 50px;
}
.comments .commenter-pic {
width: 50px;
height: 50px;
display: inline-block;
border-radius: 100%;
border: 2px solid #fff;
overflow: hidden;
background-color: #fff;
}
.comments .add-comment .commenter-name {
width: 100%;
padding-left: 75px;
position: absolute;
top: 20px;
left: 0px;
}
.comments .add-comment input {
border-top: 0px;
border-bottom: 1px solid #ccc;
border-left: 0px;
border-right: 0px;
outline: 0px;
box-shadow: none;
border-radius: 0;
width: 100%;
padding: 0;
font-weight: normal;
}
.comments .add-comment input:focus {
border-color: #03a9f4;
border-width: 2px;
}
.comments .add-comment button[type=submit] {
background-color: #03a9f4;
color: #fff;
margin-right: 0px;
}
.comments .add-comment button {
background-color: #f5f5f5;
margin: 10px 5px;
font-size: 14px;
text-transform: uppercase;
float: right;
}
.comments .commenter-name .comment-time {
font-weight: normal;
margin-left: 8px;
font-size: 15px;
}
.comments p.comment-txt {
font-size: 15px;
border-bottom: 1px solid #ddd;
padding: 0px 0px 15px;
}
.comments .commenter-name {
display: inline-block;
position: relative;
top: -20px;
left: 10px;
font-size: 16px;
font-weight: bold;
}
.comments .comment-meta {
font-size: 14px;
color: #333;
padding: 2px 5px 0px;
line-height: 20px;
float: right;
}
.comments .reply-box {
display: none;
}
.comments .replied {
background-color: #fff;
width: 95%;
float: right;
margin-top: 15px;
}
/*======Responsive CSS=======*/
@media (max-width: 767px){
.comments .commenter-name {
font-size: 13px;
top: -5px;
}
.comments .commenter-pic {
width: 40px;
height: 40px;
}
.comments .commenter-name a{
display: block;
}
.comments .commenter-name .comment-time{
display: block;
margin-left: 0px;
}
}