Bootstrap Comment post HTML markup

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.

 
  
    Comments
    
      
      
        
          
            
            username
          
        
        
          
            
              
                 That Guy
                 Dec 16, 2014
              
              
                
                  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.
                
              
               reply
            
          
        
      
   

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;
}

About your HTML

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

Comments


username

That Guy
Dec 16, 2014


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.

reply



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.

  Comments
  

Element for a single comment

For each comment, you should use the article element.

  Comments

  

  

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

Dec 16, 2014

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.

StackExchange Code Review Q#75316, answer score: 4