https://github.com/mdbootstrap/bootstrap-comments

Responsive Comment Box built with the Bootstrap 5. Comment with avatar, nested comments, comment with reply, comment section, comment template, unread comments, comment form.
https://github.com/mdbootstrap/bootstrap-comments

avatar bootstrap bootstrap5 comments forms responsive

Last synced: 25 days ago
JSON representation

Responsive Comment Box built with the Bootstrap 5. Comment with avatar, nested comments, comment with reply, comment section, comment template, unread comments, comment form.

Host: GitHub
URL: https://github.com/mdbootstrap/bootstrap-comments
Owner: mdbootstrap
License: other
Created: 2021-08-13T05:25:24.000Z (over 4 years ago)
Default Branch: main
Last Pushed: 2022-01-26T12:33:45.000Z (about 4 years ago)
Last Synced: 2025-08-18T20:31:15.832Z (8 months ago)
Topics: avatar, bootstrap, bootstrap5, comments, forms, responsive
Language: JavaScript
Homepage: https://mdbootstrap.com/docs/standard/extended/comments/
Size: 957 KB
Stars: 7
Watchers: 4
Forks: 4
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: License.pdf

Awesome Lists containing this project

README

Responsive Comment Box built with the Bootstrap 5. Comment with avatar, nested comments, comment with reply, comment section, comment template, unread comments, comment form & more.

Check out [Bootstrap Comments Documentation](https://mdbootstrap.com/docs/standard/extended/comments/) for detailed instructions & even more examples.

## Basic example

![Bootstrap 5 Comments](https://mdbootstrap.com/img/Marketing/github/comments/basic.png)

```html

+ Add a note

Type your note, and hit enter to add it

Martha

Upvote?

Type your note, and hit enter to add it

Johny

Upvote?

Type your note, and hit enter to add it

Mary Kate

Upvoted

Type your note, and hit enter to add it

Johny

Upvote?

```

## How to use?

1. Download MDB 5 - free UI KIT

2. Choose your favourite customized component and click on the image

3. Copy & paste the code into your MDB project

[▶️ Subscribe to YouTube channel for web development tutorials & resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)

## More examples

[Bootstrap Nested comments:
![Bootstrap 5 Avatar](https://mdbootstrap.com/img/Marketing/github/comments/nested.png)](https://mdbootstrap.com/docs/standard/extended/comments/#section-2)

[Bootstrap Simple comment card:
![Bootstrap 5 Avatar](https://mdbootstrap.com/img/Marketing/github/comments/simple.png)](https://mdbootstrap.com/docs/standard/extended/comments/#section-3)

[Bootstrap Recent comments:
![Bootstrap 5 Avatar](https://mdbootstrap.com/img/Marketing/github/comments/recent.png)](https://mdbootstrap.com/docs/standard/extended/comments/#section-4)

[Bootstrap Unread comments:
![Bootstrap 5 Avatar](https://mdbootstrap.com/img/Marketing/github/comments/unread.png)](https://mdbootstrap.com/docs/standard/extended/comments/#section-5)

[Bootstrap Comments within column:
![Bootstrap 5 Avatar](https://mdbootstrap.com/img/Marketing/github/comments/columns.png)](https://mdbootstrap.com/docs/standard/extended/comments/#section-6)

[Bootstrap Add a comment:
![Bootstrap 5 Avatar](https://mdbootstrap.com/img/Marketing/github/comments/add-comment.png)](https://mdbootstrap.com/docs/standard/extended/comments/#section-7)

___

## More extended Bootstrap documentation