Testimonials / Reviews
React Bootstrap 5 Testimonials / Reviews
Responsive React Testimonials / Reviews templates built with Bootstrap 5. Testimonial page and section templates with stars, images, background images, cards & more.
Basic testomonials page
A basic example of a testimonial page. Each review contains the customers profile picture, a stylized review quotation and a star rating.
Testimonials
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.
.webp)
Maria Smantha
Web Developer
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab hic tenetur.
.webp)
Lisa Cudrow
Graphic Designer
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid commodi.
.webp)
John Smith
Marketing Specialist
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.
import React from "react";
import {
MDBCol,
MDBContainer,
MDBIcon,
MDBRow,
MDBTypography,
} from "mdb-react-ui-kit";
export default function App() {
return (
<MDBContainer className="py-5">
<MDBRow className="d-flex justify-content-center">
<MDBCol md="10" xl="8" className="text-center">
<h3 className="mb-4">Testimonials</h3>
<p className="mb-4 pb-2 mb-md-5 pb-md-0">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit,
error amet numquam iure provident voluptate esse quasi, veritatis
totam voluptas nostrum quisquam eum porro a pariatur veniam.
</p>
</MDBCol>
</MDBRow>
<MDBRow className="text-center">
<MDBCol md="4" className="mb-5 mb-md-0">
<div className="d-flex justify-content-center mb-4">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(1).webp"
className="rounded-circle shadow-1-strong"
width="150"
height="150"
/>
</div>
<h5 className="mb-3">Maria Smantha</h5>
<h6 className="text-primary mb-3">Web Developer</h6>
<p className="px-xl-3">
<MDBIcon fas icon="quote-left" className="pe-2" />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos
id officiis hic tenetur quae quaerat ad velit ab hic tenetur.
</p>
<MDBTypography
listUnStyled
className="d-flex justify-content-center mb-0"
>
<li>
<MDBIcon fas icon="star" size="sm" className="text-warning" />
</li>
<li>
<MDBIcon fas icon="star" size="sm" className="text-warning" />
</li>
<li>
<MDBIcon fas icon="star" size="sm" className="text-warning" />
</li>
<li>
<MDBIcon fas icon="star" size="sm" className="text-warning" />
</li>
<li>
<MDBIcon
fas
icon="star-half-alt"
size="sm"
className="text-warning"
/>
</li>
</MDBTypography>
</MDBCol>
<MDBCol md="4" className="mb-5 mb-md-0">
<div className="d-flex justify-content-center mb-4">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(2).webp"
className="rounded-circle shadow-1-strong"
width="150"
height="150"
/>
</div>
<h5 className="mb-3">Lisa Cudrow</h5>
<h6 className="text-primary mb-3">Graphic Designer</h6>
<p className="px-xl-3">
<MDBIcon fas icon="quote-left" className="pe-2" />
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
suscipit laboriosam, nisi ut aliquid commodi.
</p>
<MDBTypography
listUnStyled
className="d-flex justify-content-center mb-0"
>
<li>
<MDBIcon fas icon="star" size="sm" className="text-warning" />
</li>
<li>
<MDBIcon fas icon="star" size="sm" className="text-warning" />
</li>
<li>
<MDBIcon fas icon="star" size="sm" className="text-warning" />
</li>
<li>
<MDBIcon fas icon="star" size="sm" className="text-warning" />
</li>
<li>
<MDBIcon fas icon="star" size="sm" className="text-warning" />
</li>
</MDBTypography>
</MDBCol>
<MDBCol md="4" className="mb-5 mb-md-0">
<div className="d-flex justify-content-center mb-4">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(9).webp"
className="rounded-circle shadow-1-strong"
width="150"
height="150"
/>
</div>
<h5 className="mb-3">John Smith</h5>
<h6 className="text-primary mb-3">Marketing Specialist</h6>
<p className="px-xl-3">
<MDBIcon fas icon="quote-left" className="pe-2" />
At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti.
</p>
<MDBTypography
listUnStyled
className="d-flex justify-content-center mb-0"
>
<li>
<MDBIcon fas icon="star" size="sm" className="text-warning" />
</li>
<li>
<MDBIcon fas icon="star" size="sm" className="text-warning" />
</li>
<li>
<MDBIcon fas icon="star" size="sm" className="text-warning" />
</li>
<li>
<MDBIcon fas icon="star" size="sm" className="text-warning" />
</li>
<li>
<MDBIcon far icon="star" size="sm" className="text-warning" />
</li>
</MDBTypography>
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
Testimonials section with background image
An elegant testimonial section, with a single review card overlayed on top of a background image.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id quam sapiente molestiae numquam quas, voluptates omnis nulla ea odio quia similique corrupti magnam.
Anna Smith
Product manager
import React from "react";
import {
MDBCard,
MDBCardBody,
MDBCol,
MDBContainer,
MDBRow,
} from "mdb-react-ui-kit";
export default function App() {
return (
<MDBContainer
fluid
className="p-4 p-md-5 text-center text-lg-start shadow-1-strong rounded"
style={{
backgroundImage:
"url(https://mdbcdn.b-cdn.net/img/Photos/Others/background2.webp)",
}}
>
<MDBRow className="d-flex justify-content-center">
<MDBCol md="10">
<MDBCard>
<MDBCardBody className="m-3">
<MDBRow>
<MDBCol
lg="4"
className="d-flex justify-content-center align-items-center mb-4 mb-lg-0"
>
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20%2810%29.webp"
className="rounded-circle img-fluid shadow-1"
alt="woman avatar"
width="200"
height="200"
/>
</MDBCol>
<MDBCol lg="8">
{" "}
<p className="text-muted fw-light mb-4">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id
quam sapiente molestiae numquam quas, voluptates omnis nulla
ea odio quia similique corrupti magnam.
</p>
<p className="fw-bold lead mb-2">
<strong>Anna Smith</strong>
</p>
<p className="fw-bold text-muted mb-0">Product manager</p>
</MDBCol>
</MDBRow>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
Small testimonials carousel
A minimalistic reviews slider section with arrow controls.
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, voluptas nostrum quisquam!"
- Anna Morian
"Neque cupiditate assumenda in maiores repudiandae mollitia adipisci maiores repudiandae mollitia consectetur adipisicing architecto elit sed adipiscing elit."
.webp)
- Teresa May
"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur est laborum neque cupiditate assumenda in maiores."
.webp)
- Kate Allise
import React from "react";
import {
MDBCarousel,
MDBCarouselInner,
MDBCarouselItem,
MDBCol,
MDBRow,
} from "mdb-react-ui-kit";
export default function App() {
return (
<MDBRow className="py-5 text-center">
<MDBCol md="12">
<MDBCarousel showControls dark>
<MDBCarouselInner>
<MDBCarouselItem className="active">
<p className="lead font-italic mx-4 mx-md-5">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Fugit, error amet numquam iure provident voluptate esse quasi,
voluptas nostrum quisquam!"
</p>
<div className="mt-5 mb-4">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(2).webp"
className="rounded-circle img-fluid shadow-1-strong"
alt="smaple image"
width="100"
height="100"
/>
</div>
<p className="text-muted mb-0">- Anna Morian</p>
</MDBCarouselItem>
<MDBCarouselItem>
<p className="lead font-italic mx-4 mx-md-5">
"Neque cupiditate assumenda in maiores repudiandae mollitia
adipisci maiores repudiandae mollitia consectetur adipisicing
architecto elit sed adipiscing elit."
</p>
<div className="mt-5 mb-4">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(31).webp"
className="rounded-circle img-fluid shadow-1-strong"
alt="smaple image"
width="100"
height="100"
/>
</div>
<p className="text-muted mb-0">- Teresa May</p>
</MDBCarouselItem>
<MDBCarouselItem>
<p className="lead font-italic mx-4 mx-md-5">
"Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur est laborum neque
cupiditate assumenda in maiores."
</p>
<div className="mt-5 mb-4">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(10).webp"
className="rounded-circle img-fluid shadow-1-strong"
alt="smaple image"
width="100"
height="100"
/>
</div>
<p className="text-muted mb-0">- Kate Allise</p>
</MDBCarouselItem>
</MDBCarouselInner>
</MDBCarousel>
</MDBCol>
</MDBRow>
);
}
Review cards
Colorful testimonial cards with circle avatars and equal height cards.
Testimonials
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.
Maria Smantha
Lorem ipsum dolor sit amet eos adipisci, consectetur adipisicing elit.
Lisa Cudrow
Neque cupiditate assumenda in maiores repudi mollitia architecto.
John Smith
Delectus impedit saepe officiis ab aliquam repellat rem unde ducimus.
import React from "react";
import {
MDBCard,
MDBCardBody,
MDBCol,
MDBContainer,
MDBIcon,
MDBRow,
} from "mdb-react-ui-kit";
export default function App() {
return (
<MDBContainer className="py-5">
<MDBRow className="d-flex justify-content-center">
<MDBCol md="10" xl="8" className="text-center">
<h3 className="mb-4">Testimonials</h3>
<p className="mb-4 pb-2 mb-md-5 pb-md-0">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit,
error amet numquam iure provident voluptate esse quasi, veritatis
totam voluptas nostrum quisquam eum porro a pariatur veniam.
</p>
</MDBCol>
</MDBRow>
<MDBRow className="text-center d-flex align-items-stretch">
<MDBCol md="4" className="mb-5 mb-md-0 d-flex align-items-stretch">
<MDBCard className="testimonial-card">
<div
className="card-up"
style={{ backgroundColor: "#9d789b" }}
></div>
<div className="avatar mx-auto bg-white">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(1).webp"
className="rounded-circle img-fluid"
/>
</div>
<MDBCardBody>
<h4 className="mb-4">Maria Smantha</h4>
<hr />
<p className="dark-grey-text mt-4">
<MDBIcon fas icon="quote-left" className="pe-2" />
Lorem ipsum dolor sit amet eos adipisci, consectetur adipisicing
elit.
</p>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol md="4" className="mb-5 mb-md-0 d-flex align-items-stretch">
<MDBCard className="testimonial-card">
<div
className="card-up"
style={{ backgroundColor: "#7a81a8" }}
></div>
<div className="avatar mx-auto bg-white">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(2).webp"
className="rounded-circle img-fluid"
/>
</div>
<MDBCardBody>
<h4 className="mb-4">Lisa Cudrow</h4>
<hr />
<p className="dark-grey-text mt-4">
<MDBIcon fas icon="quote-left" className="pe-2" />
Neque cupiditate assumenda in maiores repudi mollitia
architecto.
</p>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol md="4" className="mb-5 mb-md-0 d-flex align-items-stretch">
<MDBCard className="testimonial-card">
<div
className="card-up"
style={{ backgroundColor: "#6d5b98" }}
></div>
<div className="avatar mx-auto bg-white">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(9).webp"
className="rounded-circle img-fluid"
/>
</div>
<MDBCardBody>
<h4 className="mb-4">John Smith</h4>
<hr />
<p className="dark-grey-text mt-4">
<MDBIcon fas icon="quote-left" className="pe-2" />
Delectus impedit saepe officiis ab aliquam repellat rem unde
ducimus.
</p>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
.testimonial-card .card-up {
height: 120px;
overflow: hidden;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
}
.testimonial-card .avatar {
width: 110px;
margin-top: -60px;
overflow: hidden;
border: 3px solid #fff;
border-radius: 50%;
}
Testimonials with gradient background
Another template for a stunning testimonial page, this time as a testimonial slider on top of a beautiful gradient background.
Maria Smantha - Web Developer
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam amet animi blanditiis consequatur debitis dicta distinctio, enim error eum iste libero modi nam natus perferendis possimus quasi sint sit tempora voluptatem. Est, exercitationem id ipsa ipsum laboriosam perferendis.
Lisa Cudrow - Graphic Designer
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur.
John Smith - Marketing Specialist
At vero eos et accusamus et iusto odio dignissimos qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia mollitia animi id laborum et dolorum fuga.
import React from "react";
import {
MDBCard,
MDBCardBody,
MDBCarousel,
MDBCarouselInner,
MDBCarouselItem,
MDBCol,
MDBContainer,
MDBIcon,
MDBRow,
} from "mdb-react-ui-kit";
export default function App() {
return (
<MDBContainer fluid className="py-5 gradient-custom">
<MDBRow className="d-flex justify-content-center">
<MDBCol md="12">
<div className="text-center mb-4 pb-2">
<MDBIcon fas icon="quote-left" size="3x" className="text-white" />
</div>
<MDBCard>
<MDBCardBody className="px-4 py-5">
<MDBCarousel showIndicators showControls dark>
<MDBCarouselInner>
<MDBCarouselItem className="active">
<MDBRow className="d-flex justify-content-center">
<MDBCol lg="10" xl="8">
<MDBRow>
<MDBCol
lg="4"
className="d-flex justify-content-center"
>
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(1).webp"
className="rounded-circle shadow-1 mb-4 mb-lg-0"
alt="woman avatar"
width="150"
height="150"
/>
</MDBCol>
<MDBCol
md="9"
lg="7"
xl="8"
className="text-center text-lg-start mx-auto mx-lg-0"
>
<h4 className="mb-4">
Maria Smantha - Web Developer
</h4>
<p className="mb-0 pb-3">
Lorem ipsum dolor sit amet, consectetur
adipisicing elit. A aliquam amet animi blanditiis
consequatur debitis dicta distinctio, enim error
eum iste libero modi nam natus perferendis
possimus quasi sint sit tempora voluptatem. Est,
exercitationem id ipsa ipsum laboriosam
perferendis.
</p>
</MDBCol>
</MDBRow>
</MDBCol>
</MDBRow>
</MDBCarouselItem>
<MDBCarouselItem>
<MDBRow className="d-flex justify-content-center">
<MDBCol lg="10" xl="8">
<MDBRow>
<MDBCol
lg="4"
className="d-flex justify-content-center"
>
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(2).webp"
className="rounded-circle shadow-1 mb-4 mb-lg-0"
alt="woman avatar"
width="150"
height="150"
/>
</MDBCol>
<MDBCol
md="9"
lg="7"
xl="8"
className="text-center text-lg-start mx-auto mx-lg-0"
>
<h4 className="mb-4">
Lisa Cudrow - Graphic Designer
</h4>
<p className="mb-0 pb-3">
Sed ut perspiciatis unde omnis iste natus error
sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo
inventore veritatis et quasi architecto beatae
vitae dicta sunt explicabo. Nemo enim ipsam
voluptatem quia voluptas sit aspernatur.
</p>
</MDBCol>
</MDBRow>
</MDBCol>
</MDBRow>
</MDBCarouselItem>
<MDBCarouselItem>
<MDBRow className="d-flex justify-content-center">
<MDBCol lg="10" xl="8">
<MDBRow>
<MDBCol
lg="4"
className="d-flex justify-content-center"
>
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(3).webp"
className="rounded-circle shadow-1 mb-4 mb-lg-0"
alt="woman avatar"
width="150"
height="150"
/>
</MDBCol>
<MDBCol
md="9"
lg="7"
xl="8"
className="text-center text-lg-start mx-auto mx-lg-0"
>
<h4 className="mb-4">
John Smith - Marketing Specialist
</h4>
<p className="mb-0 pb-3">
At vero eos et accusamus et iusto odio dignissimos
qui blanditiis praesentium voluptatum deleniti
atque corrupti quos dolores et quas molestias
excepturi sint occaecati cupiditate non provident,
similique sunt in culpa qui officia mollitia animi
id laborum et dolorum fuga.
</p>
</MDBCol>
</MDBRow>
</MDBCol>
</MDBRow>
</MDBCarouselItem>
</MDBCarouselInner>
</MDBCarousel>
</MDBCardBody>
</MDBCard>
<div className="text-center mt-4 pt-2">
<MDBIcon fas icon="quote-right" size="3x" className="text-white" />
</div>
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
.gradient-custom {
background: radial-gradient(50% 123.47% at 50% 50%, #00ff94 0%, #720059 100%),
linear-gradient(121.28deg, #669600 0%, #ff0000 100%),
linear-gradient(360deg, #0029ff 0%, #8fff00 100%),
radial-gradient(100% 164.72% at 100% 100%, #6100ff 0%, #00ff57 100%),
radial-gradient(100% 148.07% at 0% 0%, #fff500 0%, #51d500 100%);
background-blend-mode: screen, color-dodge, overlay, difference, normal;
}
.carousel-indicators {
border-radius: 50%;
width: 10px;
height: 10px;
}
Two columns testimonials
Reviews displayed in two columns on medium size viewports, with the use of the grid.
Testimonials
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.
.webp)
"Lorem ipsum dolor sit amet eos adipisci, consectetur adipisicing elit sed ut perspiciatis unde omnis."
- Anna Morian
.webp)
"Neque cupiditate assumenda in maiores repudiandae mollitia architecto elit sed adipiscing elit."
- Teresa May
import React from "react";
import { MDBCol, MDBContainer, MDBRow } from "mdb-react-ui-kit";
export default function App() {
return (
<MDBContainer className="py-5">
<MDBRow className="d-flex justify-content-center">
<MDBCol md="10" xl="8" className="text-center">
<h3 className="mb-4">Testimonials</h3>
<p className="mb-4 pb-2 mb-md-5 pb-md-0">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit,
error amet numquam iure provident voluptate esse quasi, veritatis
totam voluptas nostrum quisquam eum porro a pariatur veniam.
</p>
</MDBCol>
</MDBRow>
<MDBRow className="text-center">
<MDBCol md="6" className="mb-4 mb-md-0">
<div className="d-flex justify-content-center mb-4">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(22).webp"
class="rounded-circle shadow-1-strong"
width="100"
height="100"
/>
</div>
<p className="lead my-3 text-muted">
"Lorem ipsum dolor sit amet eos adipisci, consectetur adipisicing
elit sed ut perspiciatis unde omnis."
</p>
<p className="font-italic font-weight-normal mb-0">- Anna Morian</p>
</MDBCol>
<MDBCol md="6" className="mb-4 mb-md-0">
<div className="d-flex justify-content-center mb-4">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(19).webp"
class="rounded-circle shadow-1-strong"
width="100"
height="100"
/>
</div>
<p className="lead my-3 text-muted">
"Neque cupiditate assumenda in maiores repudiandae mollitia
architecto elit sed adipiscing elit."
</p>
<p className="font-italic font-weight-normal mb-0">- Teresa May</p>
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
Three columns testimonials
Review cards displayed in three columns on medium size viewports, with the use of the grid.
Testimonials
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.
Teresa May
Founder at ET Company
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab hic tenetur.
.webp)
Maggie McLoan
Photographer at Studio LA
Autem, totam debitis suscipit saepe sapiente magnam officiis quaerat necessitatibus odio assumenda perferendis labore laboriosam.
.webp)
Alexa Horwitz
Front-end Developer in NY
Cras sit amet nibh libero, in gravida nulla metus scelerisque ante sollicitudin commodo cras purus odio, vestibulum in tempus viverra turpis.
import React from "react";
import {
MDBCard,
MDBCardBody,
MDBCol,
MDBContainer,
MDBIcon,
MDBRow,
MDBTypography,
} from "mdb-react-ui-kit";
export default function App() {
return (
<MDBContainer
fluid
className="py-5"
style={{ backgroundColor: "#f3f2f2", color: "#000" }}
>
<MDBRow className="d-flex justify-content-center">
<MDBCol md="10" xl="8" className="text-center">
<h3 className="fw-bold mb-4">Testimonials</h3>
<p className="mb-4 pb-2 mb-md-5 pb-md-0">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit,
error amet numquam iure provident voluptate esse quasi, veritatis
totam voluptas nostrum quisquam eum porro a pariatur veniam.
</p>
</MDBCol>
</MDBRow>
<MDBRow className="text-center">
<MDBCol md="4" className="mb-4 mb-md-0">
<MDBCard>
<MDBCardBody className="py-4 mt-2">
<div className="d-flex justify-content-center mb-4">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(10).webp"
className="rounded-circle shadow-1-strong"
width="100"
height="100"
/>
</div>
<h5 className="font-weight-bold">Teresa May</h5>
<h6 className="font-weight-bold my-3">Founder at ET Company</h6>
<MDBTypography
listUnStyled
className="d-flex justify-content-center"
>
<li>
<MDBIcon fas icon="star" size="sm" color="info" />
</li>
<li>
<MDBIcon fas icon="star" size="sm" color="info" />
</li>
<li>
<MDBIcon fas icon="star" size="sm" color="info" />
</li>
<li>
<MDBIcon fas icon="star" size="sm" color="info" />
</li>
<li>
<MDBIcon fas icon="star-half-alt" size="sm" color="info" />
</li>
</MDBTypography>
<p className="mb-2">
<MDBIcon fas icon="quote-left" className="pe-2" />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod
eos id officiis hic tenetur quae quaerat ad velit ab hic
tenetur.
</p>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol md="4" className="mb-4 mb-md-0">
<MDBCard>
<MDBCardBody className="py-4 mt-2">
<div className="d-flex justify-content-center mb-4">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(15).webp"
className="rounded-circle shadow-1-strong"
width="100"
height="100"
/>
</div>
<h5 className="font-weight-bold">Maggie McLoan</h5>
<h6 className="font-weight-bold my-3">
Photographer at Studio LA
</h6>
<MDBTypography
listUnStyled
className="d-flex justify-content-center"
>
<li>
<MDBIcon fas icon="star" size="sm" color="info" />
</li>
<li>
<MDBIcon fas icon="star" size="sm" color="info" />
</li>
<li>
<MDBIcon fas icon="star" size="sm" color="info" />
</li>
<li>
<MDBIcon fas icon="star" size="sm" color="info" />
</li>
<li>
<MDBIcon fas icon="star" size="sm" color="info" />
</li>
</MDBTypography>
<p className="mb-2">
<MDBIcon fas icon="quote-left" className="pe-2" />
Autem, totam debitis suscipit saepe sapiente magnam officiis
quaerat necessitatibus odio assumenda perferendis labore
laboriosam.
</p>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol md="4" className="mb-4 mb-md-0">
<MDBCard>
<MDBCardBody className="py-4 mt-2">
<div className="d-flex justify-content-center mb-4">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(17).webp"
className="rounded-circle shadow-1-strong"
width="100"
height="100"
/>
</div>
<h5 className="font-weight-bold">Alexa Horwitz</h5>
<h6 className="font-weight-bold my-3">
Front-end Developer in NY
</h6>
<MDBTypography
listUnStyled
className="d-flex justify-content-center"
>
<li>
<MDBIcon fas icon="star" size="sm" color="info" />
</li>
<li>
<MDBIcon fas icon="star" size="sm" color="info" />
</li>
<li>
<MDBIcon fas icon="star" size="sm" color="info" />
</li>
<li>
<MDBIcon fas icon="star" size="sm" color="info" />
</li>
<li>
<MDBIcon far icon="star" size="sm" color="info" />
</li>
</MDBTypography>
<p className="mb-2">
<MDBIcon fas icon="quote-left" className="pe-2" />
Cras sit amet nibh libero, in gravida nulla metus scelerisque
ante sollicitudin commodo cras purus odio, vestibulum in tempus
viverra turpis.
</p>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
);
}