Comments
React Comments component
Responsive React Comment Box built with Bootstrap 5. Comment with avatar, nested comments, with reply, comment section, comment list, unread status & comment form.
Basic example
Bootstrap comment form is often added to Blogs and News Magazine sites. Type your note, and hit enter to add it Martha Upvote? 3 Type your note, and hit enter to add it Johny Upvote? 4 Type your note, and hit enter to add it Mary Kate Upvoted 2 Type your note, and hit enter to add it Johny Upvote?.webp){kind=small}
.webp){kind=small}
.webp){kind=small}
Nested comments
Nested comments are a very useful organization structure that is recommended if you want to use comments with a reply option.
Nested comments section
.webp)
Maria Smantha - 2 hours ago
replyIt is a long established fact that a reader will be distracted by the readable content of a page.
.webp)
Simona Disa - 3 hours ago
letters, as opposed to using 'Content here, content here', making it look like readable English.
John Smith - 4 hours ago
the majority have suffered alteration in some form, by injected humour, or randomised words.
.webp)
Natalie Smith - 2 hours ago
replyThe standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33.
Lisa Cudrow - 4 hours ago
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
.webp)
Maggie McLoan - 5 hours ago
a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur
John Smith - 6 hours ago
Autem, totam debitis suscipit saepe sapiente magnam officiis quaerat necessitatibus odio assumenda, perferendis quae iusto labore laboriosam minima numquam impedit quam dolorem!
Simple comment card
You can embed a comment in the same Card as the original content, to indicate that the relation between them.
.webp)
Recent comments
Comments list is often used as a part of dashboards for admins and moderators, to help them review and accept user created content f.e. comments under a video.
Recent comments
Latest Comments section by users
.webp)
.webp)
Lara Stewart
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites.
.webp)
Alexa Bennett
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure.
.webp)
Betty Walker
It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
Unread comments
You can use Badges, Icons, or different Typography utilities, in order indicate the status of the comment.
Unread comments (4)
Comments "ON"
.webp){kind=small}
.webp){kind=small}
Comments within column
Use Flexbox utilities and CSS Grid to position the content of your comments in a separate column then user avatars.
Johny Cash
3 hours ago
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus ras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Add a comment
If you are looking to extend the comment functionality to also include a star rating you should take a look at our Reviews and Testimonials component. It includes more review comment examples as the one below.
.webp)