Comment
Includes styles for comments, for example for a blog section on your site.
Example
The Comment component consists of the comment itself, a comment header, including an avatar, a title and meta data, and a comment body.
<div id="comments" class="comments anchor p-t-50">
<ul>
<li>
<div class="comment">
<div class="comment-avatar">
<a href="profile.html"><img src="../../upload/img/user/user-1.jpg" alt=""></a>
</div>
<div class="comment-post">
<div class="comment-header">
<div class="comment-author">
<h5><a href="profile.html">Venom</a></h5>
<span>Member</span>
</div>
<div class="comment-action">
<div class="dropdown float-right">
<a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-chevron-down"></i></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Moderate</a>
<a class="dropdown-item" href="#">Embed</a>
<a class="dropdown-item" href="#">Report</a>
<a class="dropdown-item" href="#">Mark as spam</a>
</div>
</div>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<div class="comment-footer">
<ul>
<li><a href="#"><i class="fa fa-heart-o"></i> Like</a></li>
<li><a href="#"><i class="icon-reply"></i> Reply</a></li>
<li><a href="#"><i class="fa fa-clock-o"></i> 3 hours ago</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>Lists
Add the extra sub ul to a <ul> element to create a list of comments. You can nest any <ul> number of elements inside a comment list.
Comments (5)
-
Awesome these are news we were looking for, thanks yakuthemes best thing i've heard today, but more game modes are welcome.
Maecenas at tristique dolor, nec condimentum tellus. Fusce in aliquet augue. Sed non rhoncus ante, sed posuere neque. Suspendisse ac maximus arcu, at ornare nulla. Sed metus tellus, lobortis ut dignissim sed, consequat sit amet mi.
<div id="comments" class="comments anchor">
<div class="comments-header">
<h5><i class="fa fa-comment-o m-r-5"></i> Comments (5)</h5>
<div class="dropdown float-right">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Sorted by Best <span class="caret"></span></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item active" href="#">Best</a>
<a class="dropdown-item" href="#">Latest</a>
<a class="dropdown-item" href="#">Oldest</a>
<a class="dropdown-item" href="#">Random</a>
</div>
</div>
</div>
<a class="btn btn-primary text-left m-t-15 btn-block" href="#comments" role="button"><i class="fa fa-spinner fa-pulse m-r-5"></i> Load more 4 comments</a>
<ul>
<li>
<div class="comment">
<div class="comment-avatar">
<a href="profile.html"><img src="../../upload/img/user/user-1.jpg" alt=""></a>
<a class="badge badge-primary" href="profile.html" data-toggle="tooltip" data-placement="bottom" title="Add as friend"><i class="fa fa-user-plus"></i></a>
</div>
<div class="comment-post">
<div class="comment-header">
<div class="comment-author">
<h5><a href="profile.html">Venom</a></h5>
<span>Member</span>
</div>
<div class="comment-action">
<div class="dropdown float-right">
<a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-chevron-down"></i></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Moderate</a>
<a class="dropdown-item" href="#">Embed</a>
<a class="dropdown-item" href="#">Report</a>
<a class="dropdown-item" href="#">Mark as spam</a>
</div>
</div>
</div>
</div>
<p>Awesome these are news we were looking for, thanks yakuthemes best thing i've heard today, but more game modes are welcome.</p>
<p>Maecenas at tristique dolor, nec condimentum tellus. Fusce in aliquet augue. Sed non rhoncus ante, sed posuere neque. Suspendisse ac maximus arcu, at ornare nulla. Sed metus tellus, lobortis ut dignissim sed, consequat sit amet mi.</p>
<div class="comment-footer">
<ul>
<li><a href="#"><i class="fa fa-heart-o"></i> Like</a></li>
<li><a href="#"><i class="icon-reply"></i> Reply</a></li>
<li><a href="#"><i class="fa fa-clock-o"></i> 3 hours ago</a></li>
</ul>
</div>
</div>
</div>
<ul>
<li>
<div class="comment">
<div class="comment-avatar"><img src="../../upload/img/user/user-2.jpg" alt=""></div>
<div class="comment-post">
<div class="comment-header">
<div class="comment-author">
<h5><a href="profile.html">Elizabeth</a></h5>
<span>Member</span>
</div>
<div class="comment-action">
<div class="dropdown float-right">
<a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-chevron-down"></i></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Moderate</a>
<a class="dropdown-item" href="#">Embed</a>
<a class="dropdown-item" href="#">Report</a>
<a class="dropdown-item" href="#">Mark as spam</a>
</div>
</div>
</div>
</div>
<p>Please also consider replacing Battles with Blast (in Skirmish): it can use the same AI and would be much more fun (tokens are annoying and maps are limited)!</p>
<div class="comment-footer">
<ul>
<li><a href="#"><i class="fa fa-heart-o"></i> Like</a></li>
<li><a href="#"><i class="icon-reply"></i> Reply</a></li>
<li><a href="#"><i class="fa fa-clock-o"></i> 24 minutes ago</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</li>
<li>
<div class="comment">
<div class="comment-avatar"><a href="profile.html"><img src="../../upload/img/user/user-3.jpg" alt=""></a></div>
<div class="comment-post">
<div class="comment-header">
<div class="comment-author">
<h5>
<a href="profile.html">Clark</a>
<span class="badge badge-outline-primary">Admin</span>
</h5>
</div>
<div class="comment-action">
<div class="comment-action">
<div class="dropdown float-right">
<a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-chevron-down"></i></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Moderate</a>
<a class="dropdown-item" href="#">Embed</a>
<a class="dropdown-item" href="#">Report</a>
<a class="dropdown-item" href="#">Mark as spam</a>
</div>
</div>
</div>
</div>
</div>
<p>Thank you this news and I can't wait for offline content to drop next week. Aliquam a tortor at erat pulvinar volutpat eget sit amet libero. Quisque pretium lacus augue. Integer lobortis ligula non eleifend hendrerit. Cras venenatis laoreet risus, lacinia consectetur nunc scelerisque sed.</p>
<div class="comment-footer">
<ul>
<li><a href="#"><i class="fa fa-heart-o"></i> Like</a></li>
<li><a href="#"><i class="icon-reply"></i> Reply</a></li>
<li><a href="#"><i class="fa fa-clock-o"></i> June 16, 2017 8:13pm</a></li>
</ul>
</div>
</div>
</div>
</li>
<li>
<div class="comment">
<div class="comment-avatar"><a href="profile.html"><img src="../../upload/img/user/user-4.jpg" alt=""></a></div>
<div class="comment-post">
<div class="comment-header">
<div class="comment-author">
<h5><a href="profile.html">Strange</a></h5>
<span>Member</span>
</div>
<div class="comment-action">
<div class="comment-action">
<div class="dropdown float-right">
<a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-chevron-down"></i></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Moderate</a>
<a class="dropdown-item" href="#">Embed</a>
<a class="dropdown-item" href="#">Report</a>
<a class="dropdown-item" href="#">Mark as spam</a>
</div>
</div>
</div>
</div>
</div>
<p>To all those reading who have not yet bought this game yet, and are a fan of Uncharted - Don't listen to the nay-sayers on these comments, this game is simply amazing!</p>
<div class="comment-footer">
<ul>
<li><a href="#"><i class="fa fa-heart-o"></i> Like</a></li>
<li><a href="#"><i class="icon-reply"></i> Reply</a></li>
<li><a href="#"><i class="fa fa-clock-o"></i> June 11, 2017 14:26am</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
Venom
MemberLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.