Comments

What is a comment section?

A comment section shows a discussion attached to a piece of content: blog post comments, product questions, code review notes or forum replies. A typical comment includes the author's avatar and name, a timestamp, the message, and actions such as reply, like or report. Threaded layouts indent replies under their parent so conversations stay readable.

When to use comment layouts

• Under articles, tutorials and videos to invite discussion.
• In collaborative tools for notes on tasks, documents or designs.
• In support portals for ticket conversations.
• On product pages for questions and answers.

Best practices

• Mark each comment up as an <article> with the author and a <time datetime="..."> element, which helps both accessibility and search engines.
• Limit nesting depth (two or three levels) so replies do not get squeezed on mobile.
• Indent replies with a left border or line so the thread structure is visible, and keep the indent small on narrow screens.
• Label icon actions: a heart button needs an aria-label like "Like comment" and aria-pressed for its state.
• Give the comment form a visible label, not just a placeholder, and show clear validation messages.
• Escape user content on the server; never insert raw HTML from users into the page.
• For long threads, use "Load more replies" buttons instead of rendering hundreds of comments at once.

Framework versions

The comment thread examples on this page include flat lists, nested replies, comment forms and discussion layouts with reactions. Bootstrap 6 versions use theme-* colour roles for highlights such as the author's own comments and work in dark mode. Bootstrap 5 versions combine flex utilities, avatars and form controls, Tailwind CSS versions use spacing and border utilities for threads, and pure CSS versions are framework-free. Preview each layout live, copy the HTML and CSS from the code tabs, and wire the form to your own backend.