Bootstrap Comment post HTML markup

Question

I am creating styles for the comment posts for a projects using BootStrap. I am wondering if this is good HTML markup and the extending of BootStrap's CSS.

Using HTML5 markup recommendations the HTML for the comment posts is as follows.

<div class="container">
 <div class="row">
 <div class="col-md-8">
 <h2 class="page-header">Comments</h2>
 <section class="comment-list">
 <!-- First Comment -->
 <div class="row">
 <div class="col-md-2 col-sm-2 hidden-xs">
 <figure class="thumbnail">
 <img class="img-responsive" src="http://www.keita-gaming.com/assets/profile/default-avatar-c5d8ec086224cb6fc4e395f4ba3018c2.jpg" />
 <figcaption class="text-center">username</figcaption>
 </figure>
 </div>
 <div class="col-md-10 col-sm-10">
 <div class="panel panel-default arrow left">
 <div class="panel-body">
 <header class="text-left">
 <div class="comment-user"><i class="fa fa-user"></i> That Guy</div>
 <time class="comment-date" datetime="16-12-2014 01:05"><i class="fa fa-clock-o"></i> Dec 16, 2014</time>
 </header>
 <div class="comment-post">
 <p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 </p>
 </div>
 <p class="text-right"><a href="#" class="btn btn-default btn-sm"><i class="fa fa-reply"></i> reply</a></p>
 </div>
 </div>
 </div>
 </div>
 </section>
</div>

I tried to work off BootStrap's CSS and add my style to it.

The CSS is as follows

/*Comment List styles*/
.comment-list .row {
margin-bottom: 0px;
}
.comment-list .panel .panel-heading {
 padding: 4px 15px;
 position: absolute;
 border:none;
/*Panel-heading border radius*/
border-top-right-radius:0px;
top: 1px;
}
.comment-list .panel .panel-heading.right {
border-right-width: 0px;
/*Panel-heading border radius*/
border-top-left-radius:0px;
right: 16px;
}
.comment-list .panel .panel-heading .panel-body {
padding-top: 6px;
}
.comment-list figcaption {
/*For wrap text is thumbnail*/
word-wrap: break-word;
}
/* Portrait tablets and medium desktops */
@media (min-width: 768px) {
.comment-list .arrow:after, .comment-list .arrow:before {
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
}
.comment-list .panel.arrow.left:after, .comment-list .panel.arrow.left:befor {
border-left: 0;
}
/*****Left Arrow*****/
/*Outline effect style*/
.comment-list .panel.arrow.left:before {
left: 0px;
top: 30px;
/*Use boarder color of panel*/
border-right-color: inherit;
border-width: 16px;
}
/*Background color effect*/
.comment-list .panel.arrow.left:after {
left: 1px;
top: 31px;
/*Change for different outline color*/
border-right-color: #FFFFFF;
border-width: 15px;
}
/*****Right Arrow*****/
/*Outline effect style*/
.comment-list .panel.arrow.right:before {
right: -16px;
top: 30px;
/*Use boarder color of panel*/
border-left-color: inherit;
border-width: 16px;
}
/*Background color effect*/
.comment-list .panel.arrow.right:after {
right: -14px;
top: 31px;
/*Change for different outline color*/
border-left-color: #FFFFFF;
border-width: 15px;
}
}
.comment-list .comment-post {
margin-top: 6px;
}

I have included a Bootply link to the example.

comment post example on Bootply

Answer 1

About your HTML

Removing all the div elements that seem to be needed only for presentation, you have this markup:

<h2 class="page-header">Comments</h2>
<section class="comment-list">
<!-- First Comment -->
<figure class="thumbnail">
 <img class="img-responsive" src="http://www.keita-gaming.com/assets/profile/default-avatar-c5d8ec086224cb6fc4e395f4ba3018c2.jpg" />
 <figcaption class="text-center">username</figcaption>
</figure>
<header class="text-left">
 <div class="comment-user"><i class="fa fa-user"></i> That Guy</div>
 <time class="comment-date" datetime="16-12-2014 01:05"><i class="fa fa-clock-o"></i> Dec 16, 2014</time>
</header>
<div class="comment-post">
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<p class="text-right"><a href="#" class="btn btn-default btn-sm"><i class="fa fa-reply"></i> reply</a></p>
</section>

Element for all comments

The class name comment-list suggests that the section groups all comments (which would be the appropriate element for a list of comments). If that’s the case, the heading ("Comments") should be a child of this section.

<section>
 <h2>Comments</h2>
 <!-- all comments -->
</section>

Element for a single comment

For each comment, you should use the article element.

<section>
 <h2>Comments</h2>
 <article><!-- First comment --></article>
 <article><!-- Second comment --></article>
</section>

Element for CSS icons

Using the i element for CSS/font icons is not appropriate. Use span instead.

datetime format

Your time element’s datetime value is not in the correct format.

In your case it probably should be

<time datetime="2014-12-16T01:05">Dec 16, 2014</time>

Username / avatar

I don’t understand why you seem to reference two usernames ("username" in figure, "That Guy" in header), but using figure for the avatar doesn’t seem to be the best choice to me (not saying that it would necessarily be wrong).
Is the username really the caption of the avatar image? I’d rather think that these two, the avatar and the username, stand on their own. But if you think it make sense, keep it like that.

• andrewnite: Thank you for the feedback. For the figure tag, I was thinking and avatar picture is used to represent a user. So the caption is the user of the avatar.