Comments
Bootstrap 5 Comments component
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
.webp){kind=small}
Martha
Upvote?
3
Type your note, and hit enter to add it
.webp){kind=small}
Johny
Upvote?
4
Type your note, and hit enter to add it
.webp){kind=small}
Mary Kate
Upvoted
2
Type your note, and hit enter to add it
Johny
Upvote?
<div class="row d-flex justify-content-center">
<div class="col-md-8 col-lg-6">
<div class="card shadow-0 border" style="background-color: #f0f2f5;">
<div class="card-body p-4">
<div data-mdb-input-init class="form-outline mb-4">
<input type="text" id="addANote" class="form-control" placeholder="Type comment..." />
<label class="form-label" for="addANote">+ Add a note</label>
</div>
<div class="card mb-4">
<div class="card-body">
<p>Type your note, and hit enter to add it</p>
<div class="d-flex justify-content-between">
<div class="d-flex flex-row align-items-center">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(4).webp" alt="avatar" width="25"
height="25" />
<p class="small mb-0 ms-2">Martha</p>
</div>
<div class="d-flex flex-row align-items-center">
<p class="small text-muted mb-0">Upvote?</p>
<i class="far fa-thumbs-up mx-2 fa-xs text-body" style="margin-top: -0.16rem;"></i>
<p class="small text-muted mb-0">3</p>
</div>
</div>
</div>
</div>
<div class="card mb-4">
<div class="card-body">
<p>Type your note, and hit enter to add it</p>
<div class="d-flex justify-content-between">
<div class="d-flex flex-row align-items-center">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(32).webp" alt="avatar" width="25"
height="25" />
<p class="small mb-0 ms-2">Johny</p>
</div>
<div class="d-flex flex-row align-items-center">
<p class="small text-muted mb-0">Upvote?</p>
<i class="far fa-thumbs-up mx-2 fa-xs text-body" style="margin-top: -0.16rem;"></i>
<p class="small text-muted mb-0">4</p>
</div>
</div>
</div>
</div>
<div class="card mb-4">
<div class="card-body">
<p>Type your note, and hit enter to add it</p>
<div class="d-flex justify-content-between">
<div class="d-flex flex-row align-items-center">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(31).webp" alt="avatar" width="25"
height="25" />
<p class="small mb-0 ms-2">Mary Kate</p>
</div>
<div class="d-flex flex-row align-items-center text-body">
<p class="small mb-0">Upvoted</p>
<i class="fas fa-thumbs-up mx-2 fa-xs" style="margin-top: -0.16rem;"></i>
<p class="small mb-0">2</p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<p>Type your note, and hit enter to add it</p>
<div class="d-flex justify-content-between">
<div class="d-flex flex-row align-items-center">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(32).webp" alt="avatar" width="25"
height="25" />
<p class="small mb-0 ms-2">Johny</p>
</div>
<div class="d-flex flex-row align-items-center">
<p class="small text-muted mb-0">Upvote?</p>
<i class="far fa-thumbs-up ms-2 fa-xs text-body" style="margin-top: -0.16rem;"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
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!
<section class="gradient-custom">
<div class="container my-5 py-5">
<div class="row d-flex justify-content-center">
<div class="col-md-12 col-lg-10 col-xl-8">
<div class="card">
<div class="card-body p-4">
<h4 class="text-center mb-4 pb-2">Nested comments section</h4>
<div class="row">
<div class="col">
<div class="d-flex flex-start">
<img class="rounded-circle shadow-1-strong me-3"
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(10).webp" alt="avatar" width="65"
height="65" />
<div class="flex-grow-1 flex-shrink-1">
<div>
<div class="d-flex justify-content-between align-items-center">
<p class="mb-1">
Maria Smantha <span class="small">- 2 hours ago</span>
</p>
<a href="#!"><i class="fas fa-reply fa-xs"></i><span class="small"> reply</span></a>
</div>
<p class="small mb-0">
It is a long established fact that a reader will be distracted by
the readable content of a page.
</p>
</div>
<div class="d-flex flex-start mt-4">
<a class="me-3" href="#">
<img class="rounded-circle shadow-1-strong"
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(11).webp" alt="avatar"
width="65" height="65" />
</a>
<div class="flex-grow-1 flex-shrink-1">
<div>
<div class="d-flex justify-content-between align-items-center">
<p class="mb-1">
Simona Disa <span class="small">- 3 hours ago</span>
</p>
</div>
<p class="small mb-0">
letters, as opposed to using 'Content here, content here',
making it look like readable English.
</p>
</div>
</div>
</div>
<div class="d-flex flex-start mt-4">
<a class="me-3" href="#">
<img class="rounded-circle shadow-1-strong"
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(32).webp" alt="avatar"
width="65" height="65" />
</a>
<div class="flex-grow-1 flex-shrink-1">
<div>
<div class="d-flex justify-content-between align-items-center">
<p class="mb-1">
John Smith <span class="small">- 4 hours ago</span>
</p>
</div>
<p class="small mb-0">
the majority have suffered alteration in some form, by
injected humour, or randomised words.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="d-flex flex-start mt-4">
<img class="rounded-circle shadow-1-strong me-3"
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(12).webp" alt="avatar" width="65"
height="65" />
<div class="flex-grow-1 flex-shrink-1">
<div>
<div class="d-flex justify-content-between align-items-center">
<p class="mb-1">
Natalie Smith <span class="small">- 2 hours ago</span>
</p>
<a href="#!"><i class="fas fa-reply fa-xs"></i><span class="small"> reply</span></a>
</div>
<p class="small mb-0">
The standard chunk of Lorem Ipsum used since the 1500s is
reproduced below for those interested. Sections 1.10.32 and
1.10.33.
</p>
</div>
<div class="d-flex flex-start mt-4">
<a class="me-3" href="#">
<img class="rounded-circle shadow-1-strong"
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(31).webp" alt="avatar"
width="65" height="65" />
</a>
<div class="flex-grow-1 flex-shrink-1">
<div>
<div class="d-flex justify-content-between align-items-center">
<p class="mb-1">
Lisa Cudrow <span class="small">- 4 hours ago</span>
</p>
</div>
<p class="small mb-0">
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.
</p>
</div>
</div>
</div>
<div class="d-flex flex-start mt-4">
<a class="me-3" href="#">
<img class="rounded-circle shadow-1-strong"
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(29).webp" alt="avatar"
width="65" height="65" />
</a>
<div class="flex-grow-1 flex-shrink-1">
<div>
<div class="d-flex justify-content-between align-items-center">
<p class="mb-1">
Maggie McLoan <span class="small">- 5 hours ago</span>
</p>
</div>
<p class="small mb-0">
a Latin professor at Hampden-Sydney College in Virginia,
looked up one of the more obscure Latin words, consectetur
</p>
</div>
</div>
</div>
<div class="d-flex flex-start mt-4">
<a class="me-3" href="#">
<img class="rounded-circle shadow-1-strong"
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(32).webp" alt="avatar"
width="65" height="65" />
</a>
<div class="flex-grow-1 flex-shrink-1">
<div>
<div class="d-flex justify-content-between align-items-center">
<p class="mb-1">
John Smith <span class="small">- 6 hours ago</span>
</p>
</div>
<p class="small mb-0">
Autem, totam debitis suscipit saepe sapiente magnam officiis
quaerat necessitatibus odio assumenda, perferendis quae iusto
labore laboriosam minima numquam impedit quam dolorem!
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
.gradient-custom { /* fallback for old browsers */ background: #4facfe; /* Chrome 10-25,
Safari 5.1-6 */ background: -webkit-linear-gradient(to bottom right, rgba(79, 172, 254,
1), rgba(0, 242, 254, 1)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+,
Safari 7+ */ background: linear-gradient(to bottom right, rgba(79, 172, 254, 1), rgba(0,
242, 254, 1)) }
Simple comment card
You can embed a comment in the same Card as the original content, to indicate that the relation between them.
.webp)
<section style="background-color: #eee;">
<div class="container my-5 py-5">
<div class="row d-flex justify-content-center">
<div class="col-md-12 col-lg-10 col-xl-8">
<div class="card">
<div class="card-body">
<div class="d-flex flex-start align-items-center">
<img class="rounded-circle shadow-1-strong me-3"
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(19).webp" alt="avatar" width="60"
height="60" />
<div>
<h6 class="fw-bold text-primary mb-1">Lily Coleman</h6>
<p class="text-muted small mb-0">
Shared publicly - Jan 2020
</p>
</div>
</div>
<p class="mt-3 mb-4 pb-2">
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.
</p>
<div class="small d-flex justify-content-start">
<a href="#!" class="d-flex align-items-center me-3">
<i class="far fa-thumbs-up me-2"></i>
<p class="mb-0">Like</p>
</a>
<a href="#!" class="d-flex align-items-center me-3">
<i class="far fa-comment-dots me-2"></i>
<p class="mb-0">Comment</p>
</a>
<a href="#!" class="d-flex align-items-center me-3">
<i class="fas fa-share me-2"></i>
<p class="mb-0">Share</p>
</a>
</div>
</div>
<div class="card-footer py-3 border-0" style="background-color: #f8f9fa;">
<div class="d-flex flex-start w-100">
<img class="rounded-circle shadow-1-strong me-3"
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(19).webp" alt="avatar" width="40"
height="40" />
<div data-mdb-input-init class="form-outline w-100">
<textarea class="form-control" id="textAreaExample" rows="4"
style="background: #fff;"></textarea>
<label class="form-label" for="textAreaExample">Message</label>
</div>
</div>
<div class="float-end mt-2 pt-1">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-sm">Post comment</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-primary btn-sm">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
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.
<section style="background-color: #ad655f;">
<div class="container my-5 py-5">
<div class="row d-flex justify-content-center">
<div class="col-md-12 col-lg-10">
<div class="card text-body">
<div class="card-body p-4">
<h4 class="mb-0">Recent comments</h4>
<p class="fw-light mb-4 pb-2">Latest Comments section by users</p>
<div class="d-flex flex-start">
<img class="rounded-circle shadow-1-strong me-3"
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(23).webp" alt="avatar" width="60"
height="60" />
<div>
<h6 class="fw-bold mb-1">Maggie Marsh</h6>
<div class="d-flex align-items-center mb-3">
<p class="mb-0">
March 07, 2021
<span class="badge bg-primary">Pending</span>
</p>
<a href="#!" class="link-muted"><i class="fas fa-pencil-alt ms-2"></i></a>
<a href="#!" class="link-muted"><i class="fas fa-redo-alt ms-2"></i></a>
<a href="#!" class="link-muted"><i class="fas fa-heart ms-2"></i></a>
</div>
<p class="mb-0">
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.
</p>
</div>
</div>
</div>
<hr class="my-0" />
<div class="card-body p-4">
<div class="d-flex flex-start">
<img class="rounded-circle shadow-1-strong me-3"
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(26).webp" alt="avatar" width="60"
height="60" />
<div>
<h6 class="fw-bold mb-1">Lara Stewart</h6>
<div class="d-flex align-items-center mb-3">
<p class="mb-0">
March 15, 2021
<span class="badge bg-success">Approved</span>
</p>
<a href="#!" class="link-muted"><i class="fas fa-pencil-alt ms-2"></i></a>
<a href="#!" class="text-success"><i class="fas fa-redo-alt ms-2"></i></a>
<a href="#!" class="link-danger"><i class="fas fa-heart ms-2"></i></a>
</div>
<p class="mb-0">
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.
</p>
</div>
</div>
</div>
<hr class="my-0" style="height: 1px;" />
<div class="card-body p-4">
<div class="d-flex flex-start">
<img class="rounded-circle shadow-1-strong me-3"
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(33).webp" alt="avatar" width="60"
height="60" />
<div>
<h6 class="fw-bold mb-1">Alexa Bennett</h6>
<div class="d-flex align-items-center mb-3">
<p class="mb-0">
March 24, 2021
<span class="badge bg-danger">Rejected</span>
</p>
<a href="#!" class="link-muted"><i class="fas fa-pencil-alt ms-2"></i></a>
<a href="#!" class="link-muted"><i class="fas fa-redo-alt ms-2"></i></a>
<a href="#!" class="link-muted"><i class="fas fa-heart ms-2"></i></a>
</div>
<p class="mb-0">
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.
</p>
</div>
</div>
</div>
<hr class="my-0" />
<div class="card-body p-4">
<div class="d-flex flex-start">
<img class="rounded-circle shadow-1-strong me-3"
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(24).webp" alt="avatar" width="60"
height="60" />
<div>
<h6 class="fw-bold mb-1">Betty Walker</h6>
<div class="d-flex align-items-center mb-3">
<p class="mb-0">
March 30, 2021
<span class="badge bg-primary">Pending</span>
</p>
<a href="#!" class="link-muted"><i class="fas fa-pencil-alt ms-2"></i></a>
<a href="#!" class="link-muted"><i class="fas fa-redo-alt ms-2"></i></a>
<a href="#!" class="link-muted"><i class="fas fa-heart ms-2"></i></a>
</div>
<p class="mb-0">
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.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
.link-muted { color: #aaa; } .link-muted:hover { color: #1266f1; }
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}
<section style="background-color: #f7f6f6;">
<div class="container my-5 py-5 text-body">
<div class="row d-flex justify-content-center">
<div class="col-md-12 col-lg-10 col-xl-8">
<div class="d-flex justify-content-between align-items-center mb-4">
<h4 class="text-body mb-0">Unread comments (4)</h4>
<div class="card">
<div class="card-body p-2 d-flex align-items-center">
<h6 class="text-primary fw-bold small mb-0 me-1">Comments "ON"</h6>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked />
<label class="form-check-label" for="flexSwitchCheckChecked"></label>
</div>
</div>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<div class="d-flex flex-start">
<img class="rounded-circle shadow-1-strong me-3"
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(26).webp" alt="avatar" width="40"
height="40" />
<div class="w-100">
<div class="d-flex justify-content-between align-items-center mb-3">
<h6 class="text-primary fw-bold mb-0">
lara_stewart
<span class="text-body ms-2">Hmm, This poster looks cool</span>
</h6>
<p class="mb-0">2 days ago</p>
</div>
<div class="d-flex justify-content-between align-items-center">
<p class="small mb-0" style="color: #aaa;">
<a href="#!" class="link-grey">Remove</a> •
<a href="#!" class="link-grey">Reply</a> •
<a href="#!" class="link-grey">Translate</a>
</p>
<div class="d-flex flex-row">
<i class="fas fa-star text-warning me-2"></i>
<i class="far fa-check-circle" style="color: #aaa;"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<div class="d-flex flex-start">
<img class="rounded-circle shadow-1-strong me-3"
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(21).webp" alt="avatar" width="40"
height="40" />
<div class="w-100">
<div class="d-flex justify-content-between align-items-center mb-3">
<h6 class="text-primary fw-bold mb-0">
the_sylvester_cat
<span class="text-body ms-2">Loving your work and profile! </span>
</h6>
<p class="mb-0">3 days ago</p>
</div>
<div class="d-flex justify-content-between align-items-center">
<p class="small mb-0" style="color: #aaa;">
<a href="#!" class="link-grey">Remove</a> •
<a href="#!" class="link-grey">Reply</a> •
<a href="#!" class="link-grey">Translate</a>
</p>
<div class="d-flex flex-row">
<i class="far fa-check-circle text-primary"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<div class="d-flex flex-start">
<img class="rounded-circle shadow-1-strong me-3"
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(20).webp" alt="avatar" width="40"
height="40" />
<div class="w-100">
<div class="d-flex justify-content-between align-items-center mb-3">
<h6 class="text-primary fw-bold mb-0">
mindyy_def
<span class="text-body ms-2">Really cool Which filter are you using?
</span>
</h6>
<p class="mb-0">3 days ago</p>
</div>
<div class="d-flex justify-content-between align-items-center">
<p class="small mb-0" style="color: #aaa;">
<a href="#!" class="link-grey">Remove</a> •
<a href="#!" class="link-grey">Reply</a> •
<a href="#!" class="link-grey">Translate</a>
</p>
<div class="d-flex flex-row">
<i class="fas fa-user-plus" style="color: #aaa;"></i>
<i class="far fa-star mx-2" style="color: #aaa;"></i>
<i class="far fa-check-circle text-primary"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<div class="d-flex flex-start">
<img class="rounded-circle shadow-1-strong me-3"
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(14).webp" alt="avatar" width="40"
height="40" />
<div class="w-100">
<div class="d-flex justify-content-between align-items-center mb-3">
<h6 class="text-primary fw-bold mb-0">
t_anya
<span class="text-body ms-2"><span class="text-primary">@macky_lones</span>
<span class="text-primary">@rashida_jones</span> Thanks
</span>
</h6>
<p class="mb-0">4 days ago</p>
</div>
<div class="d-flex justify-content-between align-items-center">
<p class="small mb-0" style="color: #aaa;">
<a href="#!" class="link-grey">Remove</a> •
<a href="#!" class="link-grey">Reply</a> •
<a href="#!" class="link-grey">Translate</a>
</p>
<div class="d-flex flex-row">
<i class="far fa-check-circle text-primary"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
.link-grey { color: #aaa; } .link-grey:hover { color: #00913b; }
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.
<section style="background-color: #e7effd;">
<div class="container my-5 py-5 text-body">
<div class="row d-flex justify-content-center">
<div class="col-md-11 col-lg-9 col-xl-7">
<div class="d-flex flex-start mb-4">
<img class="rounded-circle shadow-1-strong me-3"
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(32).webp" alt="avatar" width="65"
height="65" />
<div class="card w-100">
<div class="card-body p-4">
<div class="">
<h5>Johny Cash</h5>
<p class="small">3 hours ago</p>
<p>
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.
</p>
<div class="d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<a href="#!" class="link-muted me-2"><i class="fas fa-thumbs-up me-1"></i>132</a>
<a href="#!" class="link-muted"><i class="fas fa-thumbs-down me-1"></i>15</a>
</div>
<a href="#!" class="link-muted"><i class="fas fa-reply me-1"></i> Reply</a>
</div>
</div>
</div>
</div>
</div>
<div class="d-flex flex-start">
<img class="rounded-circle shadow-1-strong me-3"
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(31).webp" alt="avatar" width="65"
height="65" />
<div class="card w-100">
<div class="card-body p-4">
<div class="">
<h5>Mindy Campbell</h5>
<p class="small">5 hours ago</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Delectus
cumque doloribus dolorum dolor repellat nemo animi at iure autem fuga
cupiditate architecto ut quam provident neque, inventore nisi eos quas?
</p>
<div class="d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<a href="#!" class="link-muted me-2"><i class="fas fa-thumbs-up me-1"></i>158</a>
<a href="#!" class="link-muted"><i class="fas fa-thumbs-down me-1"></i>13</a>
</div>
<a href="#!" class="link-muted"><i class="fas fa-reply me-1"></i> Reply</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
.link-muted { color: #aaa; } .link-muted:hover { color: #1266f1; }
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)
Add a comment
<section style="background-color: #d94125;">
<div class="container my-5 py-5 text-body">
<div class="row d-flex justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-6">
<div class="card">
<div class="card-body p-4">
<div class="d-flex flex-start w-100">
<img class="rounded-circle shadow-1-strong me-3"
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(21).webp" alt="avatar" width="65"
height="65" />
<div class="w-100">
<h5>Add a comment</h5>
<ul data-mdb-rating-init class="rating mb-3" data-mdb-toggle="rating">
<li>
<i class="far fa-star fa-sm text-danger" title="Bad"></i>
</li>
<li>
<i class="far fa-star fa-sm text-danger" title="Poor"></i>
</li>
<li>
<i class="far fa-star fa-sm text-danger" title="OK"></i>
</li>
<li>
<i class="far fa-star fa-sm text-danger" title="Good"></i>
</li>
<li>
<i class="far fa-star fa-sm text-danger" title="Excellent"></i>
</li>
</ul>
<div data-mdb-input-init class="form-outline">
<textarea class="form-control" id="textAreaExample" rows="4"></textarea>
<label class="form-label" for="textAreaExample">What is your view?</label>
</div>
<div class="d-flex justify-content-between mt-3">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-success">Danger</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-danger">
Send <i class="fas fa-long-arrow-alt-right ms-1"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>