Responsive 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, News Magazine sites and Newsfeeds.
Type your note, and hit enter to add it
Type your note, and hit enter to add it
Type your note, and hit enter to add it
Type your note, and hit enter to add it
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?
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
Maria Smantha — 2 hours ago
It is a long established fact that a reader will be distracted by the readable content of a page.
letters, as opposed to using ‘Content here, content here’, making it look like readable English.
the majority have suffered alteration in some form, by injected humour, or randomised words.
Natalie Smith — 2 hours ago
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33.
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.
Maggie McLoan — 5 hours ago
a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur
Autem, totam debitis suscipit saepe sapiente magnam officiis quaerat necessitatibus odio assumenda, perferendis quae iusto labore laboriosam minima numquam impedit quam dolorem!
Nested comments section
It is a long established fact that a reader will be distracted by the readable content of a page.
letters, as opposed to using 'Content here, content here', making it look like readable English.
the majority have suffered alteration in some form, by injected humour, or randomised words.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33.
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.
a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur
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.
Lorem ipsum dolor sit amet, consectetur adipiscing 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 consequat.
Lily Coleman
Shared publicly - Jan 2020
Lorem ipsum dolor sit amet, consectetur adipiscing 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 consequat.
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
Maggie Marsh
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it.
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.
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.
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.
Latest Comments section by users
Maggie Marsh
Pending
Lara Stewart
Approved
Alexa Bennett
Rejected
Betty Walker
Pending
Unread comments
You can use Badges, Icons, or different Typography utilities, in order indicate the status of the comment.
HTML comments are not displayed in the browser, but they can help document your HTML source code.
HTML Comment Tag
You can add comments to your HTML source by using the following syntax:
Notice that there is an exclamation point (!) in the start tag, but not in the end tag.
Note: Comments are not displayed by the browser, but they can help document your HTML source code.
Add Comments
With comments you can place notifications and reminders in your HTML code:
Example
Hide Content
Comments can be used to hide content.
This can be helpful if you hide content temporarily:
Example
This is another paragraph
—>
You can also hide more than one line. Everything between the will be hidden from the display.
Example
Hide a section of HTML code:
This is a paragraph.
Look at this cool image:
—>
This is a paragraph too.
Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors.
Hide Inline Content
Comments can be used to hide parts in the middle of the HTML code.
Example
Hide a part of a paragraph:
HTML Exercises
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
The comment tag is an element used to leave notes, mostly related to the project or the website. This tag is frequently used to explain something in the code or leave some recommendations about the project. The comment tag also makes it easier for the developer to come back and understand the code he’s written at a later stage. Comments can also used for commenting out lines of code for debugging purposes.
It is good practice to add comments to your code, especially when working with a team or at a company.
Comments are started with , and can span multiple lines. They can contain code or text, and won’t appear on the front-end of the website when a user visits a page. You can view comments through the Inspector Console, or by viewing Page Source.
