Comments
React Bootstrap 5 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}
import React from "react";
import {
MDBCard,
MDBCardBody,
MDBCardImage,
MDBCol,
MDBContainer,
MDBIcon,
MDBInput,
MDBRow,
} from "mdb-react-ui-kit";
export default function Basic() {
return (
<MDBContainer className="mt-5" style={{ maxWidth: "1000px" }}>
<MDBRow className="justify-content-center">
<MDBCol md="8" lg="6">
<MDBCard
className="shadow-0 border"
style={{ backgroundColor: "#f0f2f5" }}
>
<MDBCardBody>
<MDBInput wrapperClass="mb-4" placeholder="Type comment..." label="+ Add a note" />
<MDBCard className="mb-4">
<MDBCardBody>
<p>Type your note, and hit enter to add it</p>
<div className="d-flex justify-content-between">
<div className="d-flex flex-row align-items-center">
<MDBCardImage
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(4).webp"
alt="avatar"
width="25"
height="25"
/>
<p className="small mb-0 ms-2">Martha</p>
</div>
<div className="d-flex flex-row align-items-center">
<p className="small text-muted mb-0">Upvote?</p>
<MDBIcon
far
icon="thumbs-up mx-2 fa-xs text-black"
style={{ marginTop: "-0.16rem" }}
/>
<p className="small text-muted mb-0">3</p>
</div>
</div>
</MDBCardBody>
</MDBCard>
<MDBCard className="mb-4">
<MDBCardBody>
<p>Type your note, and hit enter to add it</p>
<div className="d-flex justify-content-between">
<div className="d-flex flex-row align-items-center">
<MDBCardImage
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(32).webp"
alt="avatar"
width="25"
height="25"
/>
<p className="small mb-0 ms-2">Johny</p>
</div>
<div className="d-flex flex-row align-items-center">
<p className="small text-muted mb-0">Upvote?</p>
<MDBIcon
far
icon="thumbs-up mx-2 fa-xs text-black"
style={{ marginTop: "-0.16rem" }}
/>
<p className="small text-muted mb-0">4</p>
</div>
</div>
</MDBCardBody>
</MDBCard>
<MDBCard className="mb-4">
<MDBCardBody>
<p>Type your note, and hit enter to add it</p>
<div className="d-flex justify-content-between">
<div className="d-flex flex-row align-items-center">
<MDBCardImage
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(31).webp"
alt="avatar"
width="25"
height="25"
/>
<p className="small mb-0 ms-2">Mary Kate</p>
</div>
<div className="d-flex flex-row align-items-center text-primary">
<p className="small mb-0">Upvoted</p>
<MDBIcon
fas
icon="thumbs-up mx-2 fa-xs"
style={{ marginTop: "-0.16rem" }}
/>
<p className="small mb-0">2</p>
</div>
</div>
</MDBCardBody>
</MDBCard>
<MDBCard className="mb-4">
<MDBCardBody>
<p>Type your note, and hit enter to add it</p>
<div className="d-flex justify-content-between">
<div className="d-flex flex-row align-items-center">
<MDBCardImage
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(32).webp"
alt="avatar"
width="25"
height="25"
/>
<p className="small mb-0 ms-2">Johny</p>
</div>
<div className="d-flex flex-row align-items-center">
<p className="small text-muted mb-0">Upvote?</p>
<MDBIcon
far
icon="thumbs-up mx-2 fa-xs text-black"
style={{ marginTop: "-0.16rem" }}
/>
<p className="small text-muted mb-0"></p>
</div>
</div>
</MDBCardBody>
</MDBCard>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
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!
import React from "react";
import {
MDBCard,
MDBCardBody,
MDBCardImage,
MDBCol,
MDBContainer,
MDBIcon,
MDBRow,
MDBTypography,
} from "mdb-react-ui-kit";
export default function Nested() {
return (
<section className="gradient-custom vh-100">
<MDBContainer className="py-5" style={{ maxWidth: "1000px" }}>
<MDBRow className="justify-content-center">
<MDBCol md="12" lg="10" xl="8">
<MDBCard>
<MDBCardBody className="p-4">
<MDBTypography tag="h4" className="text-center mb-4 pb-2">
Nested comments section
</MDBTypography>
<MDBRow>
<MDBCol>
<div className="d-flex flex-start">
<MDBCardImage
className="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 className="flex-grow-1 flex-shrink-1">
<div>
<div className="d-flex justify-content-between align-items-center">
<p className="mb-1">
Maria Smantha{" "}
<span className="small">- 2 hours ago</span>
</p>
<a href="#!">
<MDBIcon fas icon="reply fa-xs" />
<span className="small"> reply</span>
</a>
</div>
<p className="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 className="d-flex flex-start mt-4">
<a className="me-3" href="#">
<MDBCardImage
className="rounded-circle shadow-1-strong me-3"
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(11).webp"
alt="avatar"
width="65"
height="65"
/>
</a>
<div className="flex-grow-1 flex-shrink-1">
<div>
<div className="d-flex justify-content-between align-items-center">
<p className="mb-1">
Simona Disa{" "}
<span className="small">- 3 hours ago</span>
</p>
</div>
<p className="small mb-0">
letters, as opposed to using 'Content here,
content here', making it look like readable
English.
</p>
</div>
</div>
</div>
<div className="d-flex flex-start mt-4">
<a className="me-3" href="#">
<MDBCardImage
className="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"
/>
</a>
<div className="flex-grow-1 flex-shrink-1">
<div>
<div className="d-flex justify-content-between align-items-center">
<p className="mb-1">
John Smith{" "}
<span className="small">- 4 hours ago</span>
</p>
</div>
<p className="small mb-0">
the majority have suffered alteration in some
form, by injected humour, or randomised words.
</p>
</div>
</div>
</div>
</div>
</div>
<div className="d-flex flex-start mt-4">
<MDBCardImage
className="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 className="flex-grow-1 flex-shrink-1">
<div>
<div className="d-flex justify-content-between align-items-center">
<p className="mb-1">
Natalie Smith{" "}
<span className="small">- 2 hours ago</span>
</p>
<a href="#!">
<MDBIcon fas icon="reply fa-xs" />
<span className="small"> reply</span>
</a>
</div>
<p className="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 className="d-flex flex-start mt-4">
<a className="me-3" href="#">
<MDBCardImage
className="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"
/>
</a>
<div className="flex-grow-1 flex-shrink-1">
<div>
<div className="d-flex justify-content-between align-items-center">
<p className="mb-1">
Lisa Cudrow{" "}
<span className="small">- 4 hours ago</span>
</p>
</div>
<p className="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 className="d-flex flex-start mt-4">
<a className="me-3" href="#">
<MDBCardImage
className="rounded-circle shadow-1-strong me-3"
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(29).webp"
alt="avatar"
width="65"
height="65"
/>
</a>
<div className="flex-grow-1 flex-shrink-1">
<div>
<div className="d-flex justify-content-between align-items-center">
<p className="mb-1">
Maggie McLoan{" "}
<span className="small">- 5 hours ago</span>
</p>
</div>
<p className="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 className="d-flex flex-start mt-4">
<a className="me-3" href="#">
<MDBCardImage
className="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"
/>
</a>
<div className="flex-grow-1 flex-shrink-1">
<div>
<div className="d-flex justify-content-between align-items-center">
<p className="mb-1">
John Smith{" "}
<span className="small">- 6 hours ago</span>
</p>
</div>
<p className="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>
</MDBCol>
</MDBRow>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
</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)
import React from "react";
import {
MDBBtn,
MDBCard,
MDBCardBody,
MDBCardFooter,
MDBCardImage,
MDBCol,
MDBContainer,
MDBIcon,
MDBRow,
MDBTextArea,
} from "mdb-react-ui-kit";
export default function CommentCard() {
return (
<section className="vh-100" style={{ backgroundColor: "#eee" }}>
<MDBContainer className="py-5" style={{ maxWidth: "1000px" }}>
<MDBRow className="justify-content-center">
<MDBCol md="12" lg="10" xl="8">
<MDBCard>
<MDBCardBody>
<div className="d-flex flex-start align-items-center">
<MDBCardImage
className="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 className="fw-bold text-primary mb-1">Lily Coleman</h6>
<p className="text-muted small mb-0">
Shared publicly - Jan 2020
</p>
</div>
</div>
<p className="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 className="small d-flex justify-content-start">
<a href="#!" className="d-flex align-items-center me-3">
<MDBIcon far icon="thumbs-up me-2" />
<p className="mb-0">Like</p>
</a>
<a href="#!" className="d-flex align-items-center me-3">
<MDBIcon far icon="comment-dots me-2" />
<p className="mb-0">Comment</p>
</a>
<a href="#!" className="d-flex align-items-center me-3">
<MDBIcon fas icon="share me-2" />
<p className="mb-0">Share</p>
</a>
</div>
</MDBCardBody>
<MDBCardFooter
className="py-3 border-0"
style={{ backgroundColor: "#f8f9fa" }}
>
<div className="d-flex flex-start w-100">
<MDBCardImage
className="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"
/>
<MDBTextArea label='Message' id='textAreaExample' rows={4} style={{backgroundColor: '#fff'}} wrapperClass="w-100" />
</div>
<div className="float-end mt-2 pt-1">
<MDBBtn size="sm" className="me-1">Post comment</MDBBtn>
<MDimport React from "react";
import {
MDBBtn,
MDBCard,
MDBCardBody,
MDBCardFooter,
MDBCardImage,
MDBCol,
MDBContainer,
MDBIcon,
MDBRow,
MDBTextArea,
} from "mdb-react-ui-kit";
export default function CommentCard() {
return (
<section className="vh-100" style={{ backgroundColor: "#eee" }}>
<MDBContainer className="py-5" style={{ maxWidth: "1000px" }}>
<MDBRow className="justify-content-center">
<MDBCol md="12" lg="10" xl="8">
<MDBCard>
<MDBCardBody>
<div className="d-flex flex-start align-items-center">
<MDBCardImage
className="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 className="fw-bold text-primary mb-1">Lily Coleman</h6>
<p className="text-muted small mb-0">
Shared publicly - Jan 2020
</p>
</div>
</div>
<p className="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 className="small d-flex justify-content-start">
<a href="#!" className="d-flex align-items-center me-3">
<MDBIcon far icon="thumbs-up me-2" />
<p className="mb-0">Like</p>
</a>
<a href="#!" className="d-flex align-items-center me-3">
<MDBIcon far icon="comment-dots me-2" />
<p className="mb-0">Comment</p>
</a>
<a href="#!" className="d-flex align-items-center me-3">
<MDBIcon fas icon="share me-2" />
<p className="mb-0">Share</p>
</a>
</div>
</MDBCardBody>
<MDBCardFooter
className="py-3 border-0"
style={{ backgroundColor: "#f8f9fa" }}
>
<div className="d-flex flex-start w-100">
<MDBCardImage
className="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"
/>
<MDBTextArea label='Message' id='textAreaExample' rows={4} style={{backgroundColor: '#fff'}} wrapperClass="w-100" />
</div>
<div className="float-end mt-2 pt-1">
<MDBBtn size="sm" className="me-1">Post comment</MDBBtn>
<MDBBtn outline size="sm">Cancel</MDBBtn>
</div>
</MDBCardFooter>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
</section>
);
}
</MDBCardFooter>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
</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.
import React from "react";
import {
MDBCard,
MDBCardBody,
MDBCardImage,
MDBCol,
MDBContainer,
MDBIcon,
MDBRow,
MDBTypography,
} from "mdb-react-ui-kit";
export default function RecentComments() {
return (
<section style={{ backgroundColor: "#ad655f" }}>
<MDBContainer className="py-5" style={{ maxWidth: "1000px" }}>
<MDBRow className="justify-content-center">
<MDBCol md="12" lg="10">
<MDBCard className="text-dark">
<MDBCardBody className="p-4">
<MDBTypography tag="h4" className="mb-0">
Recent comments
</MDBTypography>
<p className="fw-light mb-4 pb-2">
Latest Comments section by users
</p>
<div className="d-flex flex-start">
<MDBCardImage
className="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>
<MDBTypography tag="h6" className="fw-bold mb-1">
Maggie Marsh
</MDBTypography>
<div className="d-flex align-items-center mb-3">
<p className="mb-0">
March 07, 2021
<span className="badge bg-primary">Pending</span>
</p>
<a href="#!" className="link-muted">
<MDBIcon fas icon="pencil-alt ms-2" />
</a>
<a href="#!" className="link-muted">
<MDBIcon fas icon="redo-alt ms-2" />
</a>
<a href="#!" className="link-muted">
<MDBIcon fas icon="heart ms-2" />
</a>
</div>
<p className="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>
</MDBCardBody>
<hr className="my-0" />
<MDBCardBody className="p-4">
<div className="d-flex flex-start">
<MDBCardImage
className="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>
<MDBTypography tag="h6" className="fw-bold mb-1">
Lara Stewart
</MDBTypography>
<div className="d-flex align-items-center mb-3">
<p className="mb-0">
March 15, 2021
<span className="badge bg-success">Approved</span>
</p>
<a href="#!" className="link-muted">
<MDBIcon fas icon="pencil-alt ms-2" />
</a>
<a href="#!" className="text-success">
<MDBIcon fas icon="redo-alt ms-2" />
</a>
<a href="#!" className="link-danger">
<MDBIcon fas icon="heart ms-2" />
</a>
</div>
<p className="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>
</MDBCardBody>
<hr className="my-0" />
<MDBCardBody className="p-4">
<div className="d-flex flex-start">
<MDBCardImage
className="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>
<MDBTypography tag="h6" className="fw-bold mb-1">
Alexa Bennett
</MDBTypography>
<div className="d-flex align-items-center mb-3">
<p className="mb-0">
March 24, 2021
<span className="badge bg-danger">Rejected</span>
</p>
<a href="#!" className="link-muted">
<MDBIcon fas icon="pencil-alt ms-2" />
</a>
<a href="#!" className="link-muted">
<MDBIcon fas icon="redo-alt ms-2" />
</a>
<a href="#!" className="link-muted">
<MDBIcon fas icon="heart ms-2" />
</a>
</div>
<p className="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>
</MDBCardBody>
<hr className="my-0" />
<MDBCardBody className="p-4">
<div className="d-flex flex-start">
<MDBCardImage
className="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>
<MDBTypography tag="h6" className="fw-bold mb-1">
Alexa Bennett
</MDBTypography>
<div className="d-flex align-items-center mb-3">
<p className="mb-0">
March 30, 2021
<span className="badge bg-primary">Pending</span>
</p>
<a href="#!" className="link-muted">
<MDBIcon fas icon="pencil-alt ms-2" />
</a>
<a href="#!" className="link-muted">
<MDBIcon fas icon="redo-alt ms-2" />
</a>
<a href="#!" className="link-muted">
<MDBIcon fas icon="heart ms-2" />
</a>
</div>
<p className="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>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
</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}
import React from "react";
import {
MDBCard,
MDBCardBody,
MDBCardImage,
MDBCol,
MDBContainer,
MDBIcon,
MDBRow,
MDBSwitch,
MDBTypography,
} from "mdb-react-ui-kit";
export default function Unread() {
return (
<section style={{ backgroundColor: "#f7f6f6" }}>
<MDBContainer className="py-5 text-dark" style={{ maxWidth: "1000px" }}>
<MDBRow className="justify-content-center">
<MDBCol md="12" lg="10" xl="8">
<div className="d-flex justify-content-between align-items-center mb-4">
<MDBTypography tag="h4" className="text-dark mb-0">
Unread comments (4)
</MDBTypography>
<MDBCard>
<MDBCardBody className="p-2 d-flex align-items-center">
<MDBTypography
tag="h6"
className="text-primary fw-bold small mb-0 me-1"
>
Comments "ON"
</MDBTypography>
<MDBSwitch defaultChecked id="flexSwitchCheckChecked" />
</MDBCardBody>
</MDBCard>
</div>
<MDBCard className="mb-3">
<MDBCardBody>
<div className="d-flex flex-start">
<MDBCardImage
className="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 className="w-100">
<div className="d-flex justify-content-between align-items-center mb-3">
<MDBTypography
tag="h6"
className="text-primary fw-bold mb-0"
>
lara_stewart
<span className="text-dark ms-2">
Hmm, This poster looks cool
</span>
</MDBTypography>
<p className="mb-0">2 days ago</p>
</div>
<div className="d-flex justify-content-between align-items-center">
<p className="small mb-0" style={{ color: "#aaa" }}>
<a href="#!" className="link-grey">
Remove
</a>{" "}
•
<a href="#!" className="link-grey">
Reply
</a>{" "}
•
<a href="#!" className="link-grey">
Translate
</a>
</p>
<div className="d-flex flex-row">
<MDBIcon fas icon="star text-warning me-2" />
<MDBIcon
far
icon="check-circle"
style={{ color: "#aaa" }}
/>
</div>
</div>
</div>
</div>
</MDBCardBody>
</MDBCard>
<MDBCard className="mb-3">
<MDBCardBody>
<div className="d-flex flex-start">
<MDBCardImage
className="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 className="w-100">
<div className="d-flex justify-content-between align-items-center mb-3">
<MDBTypography
tag="h6"
className="text-primary fw-bold mb-0"
>
the_sylvester_cat
<span className="text-dark ms-2">
Loving your work and profile!
</span>
</MDBTypography>
<p className="mb-0">3 days ago</p>
</div>
<div className="d-flex justify-content-between align-items-center">
<p className="small mb-0" style={{ color: "#aaa" }}>
<a href="#!" className="link-grey">
Remove
</a>{" "}
•
<a href="#!" className="link-grey">
Reply
</a>{" "}
•
<a href="#!" className="link-grey">
Translate
</a>
</p>
<div className="d-flex flex-row">
<MDBIcon
far
icon="check-circle text-primary"
style={{ color: "#aaa" }}
/>
</div>
</div>
</div>
</div>
</MDBCardBody>
</MDBCard>
<MDBCard className="mb-3">
<MDBCardBody>
<div className="d-flex flex-start">
<MDBCardImage
className="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 className="w-100">
<div className="d-flex justify-content-between align-items-center mb-3">
<MDBTypography
tag="h6"
className="text-primary fw-bold mb-0"
>
mindyy_def
<span className="text-dark ms-2">
Really cool Which filter are you using?
</span>
</MDBTypography>
<p className="mb-0">3 days ago</p>
</div>
<div className="d-flex justify-content-between align-items-center">
<p className="small mb-0" style={{ color: "#aaa" }}>
<a href="#!" className="link-grey">
Remove
</a>{" "}
•
<a href="#!" className="link-grey">
Reply
</a>{" "}
•
<a href="#!" className="link-grey">
Translate
</a>
</p>
<div className="d-flex flex-row">
<MDBIcon
fas
icon="user-plus"
style={{ color: "#aaa" }}
/>
<MDBIcon
fas
icon="star mx-2"
style={{ color: "#aaa" }}
/>
<MDBIcon
far
icon="check-circle text-primary"
style={{ color: "#aaa" }}
/>
</div>
</div>
</div>
</div>
</MDBCardBody>
</MDBCard>
<MDBCard className="mb-3">
<MDBCardBody>
<div className="d-flex flex-start">
<MDBCardImage
className="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 className="w-100">
<div className="d-flex justify-content-between align-items-center mb-3">
<MDBTypography
tag="h6"
className="text-primary fw-bold mb-0"
>
t_anya
<span className="text-dark ms-2">
<span className="text-primary">@macky_lones</span>
<span className="text-primary">
@rashida_jones
</span>{" "}
Thanks
</span>
</MDBTypography>
<p className="mb-0">4 days ago</p>
</div>
<div className="d-flex justify-content-between align-items-center">
<p className="small mb-0" style={{ color: "#aaa" }}>
<a href="#!" className="link-grey">
Remove
</a>{" "}
•
<a href="#!" className="link-grey">
Reply
</a>{" "}
•
<a href="#!" className="link-grey">
Translate
</a>
</p>
<div className="d-flex flex-row">
<MDBIcon
far
icon="check-circle text-primary"
style={{ color: "#aaa" }}
/>
</div>
</div>
</div>
</div>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
</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.
import React from "react";
import {
MDBCard,
MDBCardBody,
MDBCol,
MDBContainer,
MDBIcon,
MDBRow,
MDBTypography,
} from "mdb-react-ui-kit";
export default function Column() {
return (
<section className="vh-100">
<MDBContainer className="py-5" style={{ maxWidth: "1000px" }}>
<MDBRow className="justify-content-center">
<MDBCol md="11" lg="9" xl="7">
<div className="d-flex flex-start mb-4">
<img
className="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"
/>
<MDBCard className="w-100">
<MDBCardBody className="p-4">
<div>
<MDBTypography tag="h5">Johny Cash</MDBTypography>
<p className="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 className="d-flex justify-content-between align-items-center">
<div className="d-flex align-items-center">
<a href="#!" className="link-muted me-2">
<MDBIcon fas icon="thumbs-up me-1" />
132
</a>
<a href="#!" className="link-muted">
<MDBIcon fas icon="thumbs-down me-1" />
15
</a>
</div>
<a href="#!" className="link-muted">
<MDBIcon fas icon="reply me-1" /> Reply
</a>
</div>
</div>
</MDBCardBody>
</MDBCard>
</div>
<div className="d-flex flex-start mb-4">
<img
className="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"
/>
<MDBCard className="w-100">
<MDBCardBody className="p-4">
<div>
<MDBTypography tag="h5">Mindy Campbell</MDBTypography>
<p className="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 className="d-flex justify-content-between align-items-center">
<div className="d-flex align-items-center">
<a href="#!" className="link-muted me-2">
<MDBIcon fas icon="thumbs-up me-1" />
158
</a>
<a href="#!" className="link-muted">
<MDBIcon fas icon="thumbs-down me-1" />
13
</a>
</div>
<a href="#!" className="link-muted">
<MDBIcon fas icon="reply me-1" /> Reply
</a>
</div>
</div>
</MDBCardBody>
</MDBCard>
</div>
</MDBCol>
</MDBRow>
</MDBContainer>
</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
import React from "react";
import {
MDBBtn,
MDBCard,
MDBCardBody,
MDBCardImage,
MDBCol,
MDBContainer,
MDBIcon,
MDBRow,
MDBTextArea,
MDBTypography,
} from "mdb-react-ui-kit";
export default function Add() {
return (
<section className="vh-100" style={{ backgroundColor: "#d94125" }}>
<MDBContainer className="py-5" style={{ maxWidth: "1000px" }}>
<MDBRow className="justify-content-center">
<MDBCol md="10" lg="8" xl="6">
<MDBCard>
<MDBCardBody className="p-4">
<div className="d-flex flex-start w-100">
<MDBCardImage
className="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 className="w-100">
<MDBTypography tag="h5">Add a comment</MDBTypography>
<div>
<a href="">
<MDBIcon far icon="star text-danger me-1" />
<MDBIcon far icon="star text-danger me-1" />
<MDBIcon far icon="star text-danger me-1" />
<MDBIcon far icon="star text-danger me-1" />
<MDBIcon far icon="star text-danger me-1" />
</a>
</div>
<MDBTextArea label="What is your view?" rows={4} />
<div className="d-flex justify-content-between mt-3">
<MDBBtn color="success">Danger</MDBBtn>
<MDBBtn color="danger">
Send <MDBIcon fas icon="long-arrow-alt-right ms-1" />
</MDBBtn>
</div>
</div>
</div>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
</section>
);
}