Testimonials / Reviews
Bootstrap Testimonials / Reviews - free examples & tutorial
Responsive 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.
<section>
<div class="row d-flex justify-content-center">
<div class="col-md-10 col-xl-8 text-center">
<h3 class="mb-4">Testimonials</h3>
<p class="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>
</div>
</div>
<div class="row text-center">
<div class="col-md-4 mb-5 mb-md-0">
<div class="d-flex justify-content-center mb-4">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(1).webp"
class="rounded-circle shadow-1-strong" width="150" height="150" />
</div>
<h5 class="mb-3">Maria Smantha</h5>
<h6 class="text-primary mb-3">Web Developer</h6>
<p class="px-xl-3">
<i class="fas fa-quote-left pe-2"></i>Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab hic
tenetur.
</p>
<ul class="list-unstyled d-flex justify-content-center mb-0">
<li>
<i class="fas fa-star fa-sm text-warning"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-warning"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-warning"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-warning"></i>
</li>
<li>
<i class="fas fa-star-half-alt fa-sm text-warning"></i>
</li>
</ul>
</div>
<div class="col-md-4 mb-5 mb-md-0">
<div class="d-flex justify-content-center mb-4">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(2).webp"
class="rounded-circle shadow-1-strong" width="150" height="150" />
</div>
<h5 class="mb-3">Lisa Cudrow</h5>
<h6 class="text-primary mb-3">Graphic Designer</h6>
<p class="px-xl-3">
<i class="fas fa-quote-left pe-2"></i>Ut enim ad minima veniam, quis nostrum
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid commodi.
</p>
<ul class="list-unstyled d-flex justify-content-center mb-0">
<li>
<i class="fas fa-star fa-sm text-warning"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-warning"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-warning"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-warning"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-warning"></i>
</li>
</ul>
</div>
<div class="col-md-4 mb-0">
<div class="d-flex justify-content-center mb-4">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(9).webp"
class="rounded-circle shadow-1-strong" width="150" height="150" />
</div>
<h5 class="mb-3">John Smith</h5>
<h6 class="text-primary mb-3">Marketing Specialist</h6>
<p class="px-xl-3">
<i class="fas fa-quote-left pe-2"></i>At vero eos et accusamus et iusto odio
dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.
</p>
<ul class="list-unstyled d-flex justify-content-center mb-0">
<li>
<i class="fas fa-star fa-sm text-warning"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-warning"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-warning"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-warning"></i>
</li>
<li>
<i class="far fa-star fa-sm text-warning"></i>
</li>
</ul>
</div>
</div>
</section>
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
<section class="p-4 p-md-5 text-center text-lg-start shadow-1-strong rounded" style="
background-image: url(https://mdbcdn.b-cdn.net/img/Photos/Others/background2.webp);
">
<div class="row d-flex justify-content-center">
<div class="col-md-10">
<div class="card">
<div class="card-body m-3">
<div class="row">
<div class="col-lg-4 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"
class="rounded-circle img-fluid shadow-1" alt="woman avatar" width="200" height="200" />
</div>
<div class="col-lg-8">
<p class="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 class="fw-bold lead mb-2"><strong>Anna Smith</strong></p>
<p class="fw-bold text-muted mb-0">Product manager</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
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
<section>
<div class="row text-center">
<div class="col-md-12">
<!-- Carousel wrapper -->
<div id="carouselBasicExample" data-mdb-carousel-init class="carousel slide carousel-dark" data-mdb-ride="carousel">
<!-- Inner -->
<div class="carousel-inner">
<!-- Single item -->
<div class="carousel-item active">
<p class="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 class="mt-5 mb-4">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(2).webp"
class="rounded-circle img-fluid shadow-1-strong" alt="smaple image" width="100"
height="100" />
</div>
<p class="text-muted mb-0">- Anna Morian</p>
</div>
<!-- Single item -->
<div class="carousel-item">
<p class="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 class="mt-5 mb-4">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(31).webp"
class="rounded-circle img-fluid shadow-1-strong" alt="smaple image" width="100"
height="100" />
</div>
<p class="text-muted mb-0">- Teresa May</p>
</div>
<!-- Single item -->
<div class="carousel-item">
<p class="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 class="mt-5 mb-4">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(10).webp"
class="rounded-circle img-fluid shadow-1-strong" alt="smaple image" width="100"
height="100" />
</div>
<p class="text-muted mb-0">- Kate Allise</p>
</div>
</div>
<!-- Inner -->
<!-- Controls -->
<button data-mdb-button-init class="carousel-control-prev" type="button" data-mdb-target="#carouselBasicExample"
data-mdb-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button data-mdb-button-init class="carousel-control-next" type="button" data-mdb-target="#carouselBasicExample"
data-mdb-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- Carousel wrapper -->
</div>
</div>
</section>
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.
<section>
<div class="row d-flex justify-content-center">
<div class="col-md-10 col-xl-8 text-center">
<h3 class="mb-4">Testimonials</h3>
<p class="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>
</div>
</div>
<div class="row text-center d-flex align-items-stretch">
<div class="col-md-4 mb-5 mb-md-0 d-flex align-items-stretch">
<div class="card testimonial-card">
<div class="card-up" style="background-color: #9d789b;"></div>
<div class="avatar mx-auto bg-white">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(1).webp"
class="rounded-circle img-fluid" />
</div>
<div class="card-body">
<h4 class="mb-4">Maria Smantha</h4>
<hr />
<p class="dark-grey-text mt-4">
<i class="fas fa-quote-left pe-2"></i>Lorem ipsum dolor sit amet eos adipisci,
consectetur adipisicing elit.
</p>
</div>
</div>
</div>
<div class="col-md-4 mb-5 mb-md-0 d-flex align-items-stretch">
<div class="card testimonial-card">
<div class="card-up" style="background-color: #7a81a8;"></div>
<div class="avatar mx-auto bg-white">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(2).webp"
class="rounded-circle img-fluid" />
</div>
<div class="card-body">
<h4 class="mb-4">Lisa Cudrow</h4>
<hr />
<p class="dark-grey-text mt-4">
<i class="fas fa-quote-left pe-2"></i>Neque cupiditate assumenda in maiores
repudi mollitia architecto.
</p>
</div>
</div>
</div>
<div class="col-md-4 mb-0 d-flex align-items-stretch">
<div class="card testimonial-card">
<div class="card-up" style="background-color: #6d5b98;"></div>
<div class="avatar mx-auto bg-white">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(9).webp"
class="rounded-circle img-fluid" />
</div>
<div class="card-body">
<h4 class="mb-4">John Smith</h4>
<hr />
<p class="dark-grey-text mt-4">
<i class="fas fa-quote-left pe-2"></i>Delectus impedit saepe officiis ab
aliquam repellat rem unde ducimus.
</p>
</div>
</div>
</div>
</div>
</section>
.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.
<section class="gradient-custom">
<div class="container my-5 py-5">
<div class="row d-flex justify-content-center">
<div class="col-md-12">
<div class="text-center mb-4 pb-2">
<i class="fas fa-quote-left fa-3x text-white"></i>
</div>
<div class="card">
<div class="card-body px-4 py-5">
<!-- Carousel wrapper -->
<div id="carouselDarkVariant" data-mdb-carousel-init class="carousel slide carousel-dark" data-mdb-ride="carousel">
<!-- Indicators -->
<div class="carousel-indicators mb-0">
<button data-mdb-button-init data-mdb-target="#carouselDarkVariant" data-mdb-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button data-mdb-button-init data-mdb-target="#carouselDarkVariant" data-mdb-slide-to="1"
aria-label="Slide 1"></button>
<button data-mdb-button-init data-mdb-target="#carouselDarkVariant" data-mdb-slide-to="2"
aria-label="Slide 1"></button>
</div>
<!-- Inner -->
<div class="carousel-inner pb-5">
<!-- Single item -->
<div class="carousel-item active">
<div class="row d-flex justify-content-center">
<div class="col-lg-10 col-xl-8">
<div class="row">
<div class="col-lg-4 d-flex justify-content-center">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(1).webp"
class="rounded-circle shadow-1 mb-4 mb-lg-0" alt="woman avatar" width="150"
height="150" />
</div>
<div
class="col-9 col-md-9 col-lg-7 col-xl-8 text-center text-lg-start mx-auto mx-lg-0">
<h4 class="mb-4">Maria Smantha - Web Developer</h4>
<p class="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>
</div>
</div>
</div>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<div class="row d-flex justify-content-center">
<div class="col-lg-10 col-xl-8">
<div class="row">
<div class="col-lg-4 d-flex justify-content-center">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(2).webp"
class="rounded-circle shadow-1 mb-4 mb-lg-0" alt="woman avatar" width="150"
height="150" />
</div>
<div
class="col-9 col-md-9 col-lg-7 col-xl-8 text-center text-lg-start mx-auto mx-lg-0">
<h4 class="mb-4">Lisa Cudrow - Graphic Designer</h4>
<p class="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>
</div>
</div>
</div>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<div class="row d-flex justify-content-center">
<div class="col-lg-10 col-xl-8">
<div class="row">
<div class="col-lg-4 d-flex justify-content-center">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(9).webp"
class="rounded-circle shadow-1 mb-4 mb-lg-0" alt="woman avatar" width="150"
height="150" />
</div>
<div
class="col-9 col-md-9 col-lg-7 col-xl-8 text-center text-lg-start mx-auto mx-lg-0">
<h4 class="mb-4">John Smith - Marketing Specialist</h4>
<p class="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>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Inner -->
<!-- Controls -->
<button data-mdb-button-init class="carousel-control-prev" type="button" data-mdb-target="#carouselDarkVariant"
data-mdb-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button data-mdb-button-init class="carousel-control-next" type="button" data-mdb-target="#carouselDarkVariant"
data-mdb-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- Carousel wrapper -->
</div>
</div>
<div class="text-center mt-4 pt-2">
<i class="fas fa-quote-right fa-3x text-white"></i>
</div>
</div>
</div>
</div>
</section>
.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
<section>
<div class="row d-flex justify-content-center">
<div class="col-md-10 col-xl-8 text-center">
<h3 class="mb-4">Testimonials</h3>
<p class="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>
</div>
</div>
<div class="row text-center">
<div class="col-md-6 mb-4 mb-md-0">
<div class="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 class="lead my-3 text-muted">
"Lorem ipsum dolor sit amet eos adipisci, consectetur adipisicing elit sed ut
perspiciatis unde omnis."
</p>
<p class="font-italic font-weight-normal mb-0">- Anna Morian</p>
</div>
<div class="col-md-6 mb-0">
<div class="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 class="lead my-3 text-muted">
"Neque cupiditate assumenda in maiores repudiandae mollitia architecto elit sed
adipiscing elit."
</p>
<p class="font-italic font-weight-normal mb-0">- Teresa May</p>
</div>
</div>
</section>
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.
<section style="color: #000; background-color: #f3f2f2;">
<div class="container py-5">
<div class="row d-flex justify-content-center">
<div class="col-md-10 col-xl-8 text-center">
<h3 class="fw-bold mb-4">Testimonials</h3>
<p class="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>
</div>
</div>
<div class="row text-center">
<div class="col-md-4 mb-4 mb-md-0">
<div class="card">
<div class="card-body py-4 mt-2">
<div class="d-flex justify-content-center mb-4">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(10).webp"
class="rounded-circle shadow-1-strong" width="100" height="100" />
</div>
<h5 class="font-weight-bold">Teresa May</h5>
<h6 class="font-weight-bold my-3">Founder at ET Company</h6>
<ul class="list-unstyled d-flex justify-content-center">
<li>
<i class="fas fa-star fa-sm text-info"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-info"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-info"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-info"></i>
</li>
<li>
<i class="fas fa-star-half-alt fa-sm text-info"></i>
</li>
</ul>
<p class="mb-2">
<i class="fas fa-quote-left pe-2"></i>Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat
ad velit ab hic tenetur.
</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4 mb-md-0">
<div class="card">
<div class="card-body py-4 mt-2">
<div class="d-flex justify-content-center mb-4">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(15).webp"
class="rounded-circle shadow-1-strong" width="100" height="100" />
</div>
<h5 class="font-weight-bold">Maggie McLoan</h5>
<h6 class="font-weight-bold my-3">Photographer at Studio LA</h6>
<ul class="list-unstyled d-flex justify-content-center">
<li>
<i class="fas fa-star fa-sm text-info"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-info"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-info"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-info"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-info"></i>
</li>
</ul>
<p class="mb-2">
<i class="fas fa-quote-left pe-2"></i>Autem, totam debitis suscipit saepe
sapiente magnam officiis quaerat necessitatibus odio assumenda perferendis
labore laboriosam.
</p>
</div>
</div>
</div>
<div class="col-md-4 mb-0">
<div class="card">
<div class="card-body py-4 mt-2">
<div class="d-flex justify-content-center mb-4">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(17).webp"
class="rounded-circle shadow-1-strong" width="100" height="100" />
</div>
<h5 class="font-weight-bold">Alexa Horwitz</h5>
<h6 class="font-weight-bold my-3">Front-end Developer in NY</h6>
<ul class="list-unstyled d-flex justify-content-center">
<li>
<i class="fas fa-star fa-sm text-info"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-info"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-info"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-info"></i>
</li>
<li>
<i class="far fa-star fa-sm text-info"></i>
</li>
</ul>
<p class="mb-2">
<i class="fas fa-quote-left pe-2"></i>Cras sit amet nibh libero, in gravida
nulla metus scelerisque ante sollicitudin commodo cras purus odio,
vestibulum in tempus viverra turpis.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
.card {
border-radius: .7rem;
}