Testimonials
These sections showcase feedback, reviews, or endorsements from customers, clients, or users.
Overview
"Testimonials" blocks are sections on websites or applications that showcase feedback, reviews, or endorsements from customers, clients, or users. They often include names, photos, and brief quotes or stories, helping potential users connect with authentic voices and make informed decisions.
Some of these examples make use of Swiper.js, a mobile-friendly slider library. To include Swiper in your project, add the following CDN links to your HTML file.
JavaScript
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
CSS
<link href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" rel="stylesheet" />
Examples
Below are a few examples of “Testimonials” sections.
Example 1
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet consectetur adipisicing elit."
John Doe
Marketing Manager
<section class="bg-body py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6">
<img
src="https://placehold.co/540x540/31343C/EEE?text=Placeholder+540x540"
class="img-fluid rounded-4"
alt="Testimonials Image"
/>
</div>
<div class="col-md-6 text-md-center mt-4 mt-md-0">
<i class="ri-double-quotes-l text-primary opacity-25 fs-1 mb-0"></i>
<p class="mb-3">
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero
corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet consectetur
adipisicing elit."
</p>
<p class="fw-semibold fs-5 mb-2">John Doe</p>
<p class="text-muted mb-0">Marketing Manager</p>
</div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="row align-items-center"> <div class="col-md-6"> <img
src="https://placehold.co/540x540/31343C/EEE?text=Placeholder+540x540"
class="img-fluid rounded-4" alt="Testimonials Image" /> </div>
<div class="col-md-6 text-md-center mt-4 mt-md-0"> <i
class="ri-double-quotes-l text-primary opacity-25 fs-1 mb-0"></i> <p
class="mb-3"> "Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dolorum quibusdam, libero corporis dignissimos provident nulla nemo! Quam impedit dolores vel
sit amet consectetur adipisicing elit." </p> <p class="fw-semibold fs-5
mb-2">John Doe</p> <p class="text-muted mb-0">Marketing
Manager</p> </div> </div> </div> </section>
Example 2
Testimonials
What people are saying about us
“This service completely exceeded my expectations. I couldn't be happier with the results!”
Rahul Mehta
Marketing Head
“An outstanding experience from start to finish. Truly a team that cares about the details.”
Aaron Thomas
UX Designer
“This platform made everything so simple and stress-free. I’m genuinely impressed with the outcome!”
Reena Paul
HR Manager
“I was amazed at how smooth the process was. The support team was incredibly responsive.”
Neha Gupta
Content Strategist
“Every step felt intuitive and well thought-out. Highly recommend to anyone looking for quality!”
Jane Smith
Product Designer
“They understood exactly what was needed to be done and delivered beyond what I imagined.”
Nguyen Minh
Software Engineer
<section class="bg-body py-5">
<div class="container">
<div class="text-center">
<h1 class="text-primary fw-semibold text-uppercase fs-5 mb-2">Testimonials</h1>
<h2 class="mb-4">What people are saying about us</h2>
</div>
<div class="row g-3 g-lg-4">
<div class="col-sm-6 col-md-4">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<div class="card-body p-3">
<i class="ri-double-quotes-l text-primary opacity-25 fs-1 mb-0"></i>
<p>“This service completely exceeded my expectations. I couldn't be happier with the results!”</p>
<div class="d-flex align-items-center">
<span class="avatar avatar-md mb-0 me-3">
<img
src="https://placehold.co/128x128/31343C/EEE?text=R"
alt="Avatar"
class="img-fluid rounded-circle"
/>
</span>
<div>
<h6 class="mb-2">Rahul Mehta</h6>
<p class="mb-0">Marketing Head</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<div class="card-body p-3">
<i class="ri-double-quotes-l text-primary opacity-25 fs-1 mb-0"></i>
<p>“An outstanding experience from start to finish. Truly a team that cares about the details.”</p>
<div class="d-flex align-items-center">
<span class="avatar avatar-md mb-0 me-3">
<img
src="https://placehold.co/128x128/31343C/EEE?text=A"
alt="Avatar"
class="img-fluid rounded-circle"
/>
</span>
<div>
<h6 class="mb-2">Aaron Thomas</h6>
<p class="mb-0">UX Designer</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<div class="card-body p-3">
<i class="ri-double-quotes-l text-primary opacity-25 fs-1 mb-0"></i>
<p>“This platform made everything so simple and stress-free. I’m genuinely impressed with the outcome!”</p>
<div class="d-flex align-items-center">
<span class="avatar avatar-md mb-0 me-3">
<img
src="https://placehold.co/128x128/31343C/EEE?text=R"
alt="Avatar"
class="img-fluid rounded-circle"
/>
</span>
<div>
<h6 class="mb-2">Reena Paul</h6>
<p class="mb-0">HR Manager</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<div class="card-body p-3">
<i class="ri-double-quotes-l text-primary opacity-25 fs-1 mb-0"></i>
<p>“I was amazed at how smooth the process was. The support team was incredibly responsive.”</p>
<div class="d-flex align-items-center">
<span class="avatar avatar-md mb-0 me-3">
<img
src="https://placehold.co/128x128/31343C/EEE?text=N"
alt="Avatar"
class="img-fluid rounded-circle"
/>
</span>
<div>
<h6 class="mb-2">Neha Gupta</h6>
<p class="mb-0">Content Strategist</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<div class="card-body p-3">
<i class="ri-double-quotes-l text-primary opacity-25 fs-1 mb-0"></i>
<p>“Every step felt intuitive and well thought-out. Highly recommend to anyone looking for quality!”</p>
<div class="d-flex align-items-center">
<span class="avatar avatar-md mb-0 me-3">
<img
src="https://placehold.co/128x128/31343C/EEE?text=J"
alt="Avatar"
class="img-fluid rounded-circle"
/>
</span>
<div>
<h6 class="mb-2">Jane Smith</h6>
<p class="mb-0">Product Designer</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<div class="card-body p-3">
<i class="ri-double-quotes-l text-primary opacity-25 fs-1 mb-0"></i>
<p>“They understood exactly what was needed to be done and delivered beyond what I imagined.”</p>
<div class="d-flex align-items-center">
<span class="avatar avatar-md mb-0 me-3">
<img
src="https://placehold.co/128x128/31343C/EEE?text=N"
alt="Avatar"
class="img-fluid rounded-circle"
/>
</span>
<div>
<h6 class="mb-2">Nguyen Minh</h6>
<p class="mb-0">Software Engineer</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="text-center"> <h1 class="text-primary fw-semibold text-uppercase
fs-5 mb-2">Testimonials</h1> <h2 class="mb-4">What people are
saying about us</h2> </div> <div class="row g-3 g-lg-4"> <div
class="col-sm-6 col-md-4"> <div class="card bg-secondary shadow border-0
h-100 p-0"> <div class="card-body p-3"> <i
class="ri-double-quotes-l text-primary opacity-25 fs-1 mb-0"></i>
<p>“This service completely exceeded my expectations. I couldn't be happier with the
results!”</p> <div class="d-flex align-items-center"> <span
class="avatar avatar-md mb-0 me-3"> <img
src="https://placehold.co/128x128/31343C/EEE?text=R" alt="Avatar"
class="img-fluid rounded-circle" /> </span> <div> <h6
class="mb-2">Rahul Mehta</h6> <p class="mb-0">Marketing
Head</p> </div> </div> </div> </div> </div> <div
class="col-sm-6 col-md-4"> <div class="card bg-secondary shadow border-0
h-100 p-0"> <div class="card-body p-3"> <i
class="ri-double-quotes-l text-primary opacity-25 fs-1 mb-0"></i>
<p>“An outstanding experience from start to finish. Truly a team that cares about the
details.”</p> <div class="d-flex align-items-center"> <span
class="avatar avatar-md mb-0 me-3"> <img
src="https://placehold.co/128x128/31343C/EEE?text=A" alt="Avatar"
class="img-fluid rounded-circle" /> </span> <div> <h6
class="mb-2">Aaron Thomas</h6> <p class="mb-0">UX
Designer</p> </div> </div> </div> </div> </div> <div
class="col-sm-6 col-md-4"> <div class="card bg-secondary shadow border-0
h-100 p-0"> <div class="card-body p-3"> <i
class="ri-double-quotes-l text-primary opacity-25 fs-1 mb-0"></i>
<p>“This platform made everything so simple and stress-free. I’m genuinely impressed with
the outcome!”</p> <div class="d-flex align-items-center"> <span
class="avatar avatar-md mb-0 me-3"> <img
src="https://placehold.co/128x128/31343C/EEE?text=R" alt="Avatar"
class="img-fluid rounded-circle" /> </span> <div> <h6
class="mb-2">Reena Paul</h6> <p class="mb-0">HR
Manager</p> </div> </div> </div> </div> </div> <div
class="col-sm-6 col-md-4"> <div class="card bg-secondary shadow border-0
h-100 p-0"> <div class="card-body p-3"> <i
class="ri-double-quotes-l text-primary opacity-25 fs-1 mb-0"></i> <p>“I
was amazed at how smooth the process was. The support team was incredibly responsive.”</p>
<div class="d-flex align-items-center"> <span class="avatar avatar-md
mb-0 me-3"> <img src="https://placehold.co/128x128/31343C/EEE?text=N"
alt="Avatar" class="img-fluid rounded-circle" /> </span>
<div> <h6 class="mb-2">Neha Gupta</h6> <p
class="mb-0">Content Strategist</p> </div> </div> </div>
</div> </div> <div class="col-sm-6 col-md-4"> <div
class="card bg-secondary shadow border-0 h-100 p-0"> <div class="card-body
p-3"> <i class="ri-double-quotes-l text-primary opacity-25 fs-1
mb-0"></i> <p>“Every step felt intuitive and well thought-out. Highly
recommend to anyone looking for quality!”</p> <div class="d-flex
align-items-center"> <span class="avatar avatar-md mb-0 me-3"> <img
src="https://placehold.co/128x128/31343C/EEE?text=J" alt="Avatar"
class="img-fluid rounded-circle" /> </span> <div> <h6
class="mb-2">Jane Smith</h6> <p class="mb-0">Product
Designer</p> </div> </div> </div> </div> </div> <div
class="col-sm-6 col-md-4"> <div class="card bg-secondary shadow border-0
h-100 p-0"> <div class="card-body p-3"> <i
class="ri-double-quotes-l text-primary opacity-25 fs-1 mb-0"></i>
<p>“They understood exactly what was needed to be done and delivered beyond what I
imagined.”</p> <div class="d-flex align-items-center"> <span
class="avatar avatar-md mb-0 me-3"> <img
src="https://placehold.co/128x128/31343C/EEE?text=N" alt="Avatar"
class="img-fluid rounded-circle" /> </span> <div> <h6
class="mb-2">Nguyen Minh</h6> <p class="mb-0">Software
Engineer</p> </div> </div> </div> </div> </div> </div>
</div> </section>
Example 3
Testimonials
What people are saying about us
“This service completely exceeded my expectations. I couldn't be happier with the results!”
Rahul Mehta
Marketing Head
“It was an outstanding experience from start to finish. Truly a team that cares about all the details.”
Jane Smith
Product Designer
“This platform made everything so simple and stress-free. I’m genuinely impressed with the outcome!”
Reena Paul
HR Manager
“They understood exactly what was needed to be done and delivered beyond what I imagined.”
Nguyen Minh
Software Engineer
<section class="bg-body py-5">
<div class="container">
<div class="row">
<div class="col-md-4">
<h1 class="text-primary fw-semibold text-uppercase fs-5 mb-2">Testimonials</h1>
<h2 class="mb-3">What people are saying about us</h2>
<button class="btn btn-outline-secondary">Learn more<i class="ri-arrow-right-line ms-2"></i></button>
</div>
<div class="col-md-8 mt-4 mt-md-0">
<!-- Slider main container -->
<div class="swiper ex3Swiper">
<div class="swiper-wrapper mb-5">
<div class="swiper-slide" style="height: auto;">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<div class="card-body d-flex flex-column p-3">
<div class="mb-2">
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-half-fill text-warning"></i>
</div>
<p>“This service completely exceeded my expectations. I couldn't be happier with the results!”</p>
<div class="d-flex align-items-center mt-auto">
<span class="avatar avatar-md mb-0 me-3">
<img
src="https://placehold.co/128x128/31343C/EEE?text=R"
alt="Avatar"
class="img-fluid rounded-circle"
/>
</span>
<div>
<h6 class="mb-2">Rahul Mehta</h6>
<p class="mb-0">Marketing Head</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide" style="height: auto;">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<div class="card-body d-flex flex-column p-3">
<div class="mb-2">
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
</div>
<p>“It was an outstanding experience from start to finish. Truly a team that cares about all the details.”</p>
<div class="d-flex align-items-center mt-auto">
<span class="avatar avatar-md mb-0 me-3">
<img
src="https://placehold.co/128x128/31343C/EEE?text=J"
alt="Avatar"
class="img-fluid rounded-circle"
/>
</span>
<div>
<h6 class="mb-2">Jane Smith</h6>
<p class="mb-0">Product Designer</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide" style="height: auto;">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<div class="card-body d-flex flex-column p-3">
<div class="mb-2">
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
</div>
<p>“This platform made everything so simple and stress-free. I’m genuinely impressed with the outcome!”</p>
<div class="d-flex align-items-center mt-auto">
<span class="avatar avatar-md mb-0 me-3">
<img
src="https://placehold.co/128x128/31343C/EEE?text=R"
alt="Avatar"
class="img-fluid rounded-circle"
/>
</span>
<div>
<h6 class="mb-2">Reena Paul</h6>
<p class="mb-0">HR Manager</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide" style="height: auto;">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<div class="card-body d-flex flex-column p-3">
<div class="mb-2">
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-half-fill text-warning"></i>
</div>
<p>“They understood exactly what was needed to be done and delivered beyond what I imagined.”</p>
<div class="d-flex align-items-center mt-auto">
<span class="avatar avatar-md mb-0 me-3">
<img
src="https://placehold.co/128x128/31343C/EEE?text=N"
alt="Avatar"
class="img-fluid rounded-circle"
/>
</span>
<div>
<h6 class="mb-2">Nguyen Minh</h6>
<p class="mb-0">Software Engineer</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="row"> <div class="col-md-4"> <h1 class="text-primary
fw-semibold text-uppercase fs-5 mb-2">Testimonials</h1> <h2
class="mb-3">What people are saying about us</h2> <button class="btn
btn-outline-secondary">Learn more<i class="ri-arrow-right-line
ms-2"></i></button> </div> <div class="col-md-8 mt-4
mt-md-0"> <!-- Slider main container --> <div class="swiper
ex3Swiper"> <div class="swiper-wrapper mb-5"> <div
class="swiper-slide" style="height: auto;"> <div class="card
bg-secondary shadow border-0 h-100 p-0"> <div class="card-body d-flex
flex-column p-3"> <div class="mb-2"> <i class="ri-star-fill
text-warning"></i> <i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i> <i class="ri-star-fill
text-warning"></i> <i class="ri-star-half-fill
text-warning"></i> </div> <p>“This service completely exceeded my
expectations. I couldn't be happier with the results!”</p> <div class="d-flex
align-items-center mt-auto"> <span class="avatar avatar-md mb-0 me-3">
<img src="https://placehold.co/128x128/31343C/EEE?text=R" alt="Avatar"
class="img-fluid rounded-circle" /> </span> <div> <h6
class="mb-2">Rahul Mehta</h6> <p class="mb-0">Marketing
Head</p> </div> </div> </div> </div> </div> <div
class="swiper-slide" style="height: auto;"> <div class="card
bg-secondary shadow border-0 h-100 p-0"> <div class="card-body d-flex
flex-column p-3"> <div class="mb-2"> <i class="ri-star-fill
text-warning"></i> <i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i> <i class="ri-star-fill
text-warning"></i> <i class="ri-star-fill text-warning"></i>
</div> <p>“It was an outstanding experience from start to finish. Truly a team that
cares about all the details.”</p> <div class="d-flex align-items-center
mt-auto"> <span class="avatar avatar-md mb-0 me-3"> <img
src="https://placehold.co/128x128/31343C/EEE?text=J" alt="Avatar"
class="img-fluid rounded-circle" /> </span> <div> <h6
class="mb-2">Jane Smith</h6> <p class="mb-0">Product
Designer</p> </div> </div> </div> </div> </div> <div
class="swiper-slide" style="height: auto;"> <div class="card
bg-secondary shadow border-0 h-100 p-0"> <div class="card-body d-flex
flex-column p-3"> <div class="mb-2"> <i class="ri-star-fill
text-warning"></i> <i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i> <i class="ri-star-fill
text-warning"></i> <i class="ri-star-fill text-warning"></i>
</div> <p>“This platform made everything so simple and stress-free. I’m genuinely
impressed with the outcome!”</p> <div class="d-flex align-items-center
mt-auto"> <span class="avatar avatar-md mb-0 me-3"> <img
src="https://placehold.co/128x128/31343C/EEE?text=R" alt="Avatar"
class="img-fluid rounded-circle" /> </span> <div> <h6
class="mb-2">Reena Paul</h6> <p class="mb-0">HR
Manager</p> </div> </div> </div> </div> </div> <div
class="swiper-slide" style="height: auto;"> <div class="card
bg-secondary shadow border-0 h-100 p-0"> <div class="card-body d-flex
flex-column p-3"> <div class="mb-2"> <i class="ri-star-fill
text-warning"></i> <i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i> <i class="ri-star-fill
text-warning"></i> <i class="ri-star-half-fill
text-warning"></i> </div> <p>“They understood exactly what was needed
to be done and delivered beyond what I imagined.”</p> <div class="d-flex
align-items-center mt-auto"> <span class="avatar avatar-md mb-0 me-3">
<img src="https://placehold.co/128x128/31343C/EEE?text=N" alt="Avatar"
class="img-fluid rounded-circle" /> </span> <div> <h6
class="mb-2">Nguyen Minh</h6> <p class="mb-0">Software
Engineer</p> </div> </div> </div> </div> </div> </div>
<div class="swiper-pagination"></div> </div> </div>
</div> </div> </section>
.swiper-pagination-bullet {
background: var(--bs-primary);
}
.swiper-pagination-bullet-active {
background: var(--bs-primary);
}
.swiper-pagination-bullet { background: var(--bs-primary); } .swiper-pagination-bullet-active {
background: var(--bs-primary); }
document.addEventListener('DOMContentLoaded', () => {
var swiper = new Swiper(".ex3Swiper", {
slidesPerView: 1,
spaceBetween: 20,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
breakpoints: {
768: {
slidesPerView: 2,
spaceBetween: 30,
}
}
});
});
document.addEventListener('DOMContentLoaded', () => { var swiper = new
Swiper(".ex3Swiper", { slidesPerView: 1, spaceBetween: 20, pagination: { el:
".swiper-pagination", clickable: true, }, autoplay: { delay: 3000,
disableOnInteraction: false, }, breakpoints: { 768: { slidesPerView: 2, spaceBetween: 30, } }
}); });
Example 4
Testimonials
What people are saying about us
“This service completely exceeded my expectations. I couldn't be happier with the results!”
Rahul Mehta
Marketing Head
“It was an outstanding experience from start to finish. Truly a team that cares about all the details.”
Jane Smith
Product Designer
“This platform made everything so simple and stress-free. I’m genuinely impressed with the outcome!”
Reena Paul
HR Manager
“They understood exactly what was needed to be done and delivered beyond what I imagined.”
Nguyen Minh
Software Engineer
“It was an outstanding experience from start to finish. Truly a team that cares about all the details.”
Neha Gupta
Content Strategist
<section class="bg-body py-5">
<div class="container">
<div class="text-center">
<h1 class="text-primary fw-semibold text-uppercase fs-5 mb-2">Testimonials</h1>
<h2 class="mb-4">What people are saying about us</h2>
</div>
<div class="swiper ex4Swiper">
<div class="swiper-wrapper mb-5">
<div class="swiper-slide" style="height: auto;">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<div class="card-body d-flex flex-column p-3">
<div class="mb-2">
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-half-fill text-warning"></i>
</div>
<p>“This service completely exceeded my expectations. I couldn't be happier with the results!”</p>
<div class="d-flex align-items-center mt-auto">
<span class="avatar avatar-md mb-0 me-3">
<img
src="https://placehold.co/128x128/31343C/EEE?text=R"
alt="Avatar"
class="img-fluid rounded-circle"
/>
</span>
<div>
<h6 class="mb-2">Rahul Mehta</h6>
<p class="mb-0">Marketing Head</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide" style="height: auto;">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<div class="card-body d-flex flex-column p-3">
<div class="mb-2">
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
</div>
<p>“It was an outstanding experience from start to finish. Truly a team that cares about all the details.”</p>
<div class="d-flex align-items-center mt-auto">
<span class="avatar avatar-md mb-0 me-3">
<img
src="https://placehold.co/128x128/31343C/EEE?text=J"
alt="Avatar"
class="img-fluid rounded-circle"
/>
</span>
<div>
<h6 class="mb-2">Jane Smith</h6>
<p class="mb-0">Product Designer</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide" style="height: auto;">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<div class="card-body d-flex flex-column p-3">
<div class="mb-2">
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
</div>
<p>“This platform made everything so simple and stress-free. I’m genuinely impressed with the outcome!”</p>
<div class="d-flex align-items-center mt-auto">
<span class="avatar avatar-md mb-0 me-3">
<img
src="https://placehold.co/128x128/31343C/EEE?text=R"
alt="Avatar"
class="img-fluid rounded-circle"
/>
</span>
<div>
<h6 class="mb-2">Reena Paul</h6>
<p class="mb-0">HR Manager</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide" style="height: auto;">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<div class="card-body d-flex flex-column p-3">
<div class="mb-2">
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-half-fill text-warning"></i>
</div>
<p>“They understood exactly what was needed to be done and delivered beyond what I imagined.”</p>
<div class="d-flex align-items-center mt-auto">
<span class="avatar avatar-md mb-0 me-3">
<img
src="https://placehold.co/128x128/31343C/EEE?text=N"
alt="Avatar"
class="img-fluid rounded-circle"
/>
</span>
<div>
<h6 class="mb-2">Nguyen Minh</h6>
<p class="mb-0">Software Engineer</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide" style="height: auto;">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<div class="card-body d-flex flex-column p-3">
<div class="mb-2">
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
</div>
<p>“It was an outstanding experience from start to finish. Truly a team that cares about all the details.”</p>
<div class="d-flex align-items-center mt-auto">
<span class="avatar avatar-md mb-0 me-3">
<img
src="https://placehold.co/128x128/31343C/EEE?text=N"
alt="Avatar"
class="img-fluid rounded-circle"
/>
</span>
<div>
<h6 class="mb-2">Neha Gupta</h6>
<p class="mb-0">Content Strategist</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="text-center"> <h1 class="text-primary fw-semibold text-uppercase
fs-5 mb-2">Testimonials</h1> <h2 class="mb-4">What people are
saying about us</h2> </div> <div class="swiper ex4Swiper"> <div
class="swiper-wrapper mb-5"> <div class="swiper-slide"
style="height: auto;"> <div class="card bg-secondary shadow border-0 h-100
p-0"> <div class="card-body d-flex flex-column p-3"> <div
class="mb-2"> <i class="ri-star-fill text-warning"></i> <i
class="ri-star-fill text-warning"></i> <i class="ri-star-fill
text-warning"></i> <i class="ri-star-fill text-warning"></i>
<i class="ri-star-half-fill text-warning"></i> </div> <p>“This
service completely exceeded my expectations. I couldn't be happier with the
results!”</p> <div class="d-flex align-items-center mt-auto"> <span
class="avatar avatar-md mb-0 me-3"> <img
src="https://placehold.co/128x128/31343C/EEE?text=R" alt="Avatar"
class="img-fluid rounded-circle" /> </span> <div> <h6
class="mb-2">Rahul Mehta</h6> <p class="mb-0">Marketing
Head</p> </div> </div> </div> </div> </div> <div
class="swiper-slide" style="height: auto;"> <div class="card
bg-secondary shadow border-0 h-100 p-0"> <div class="card-body d-flex
flex-column p-3"> <div class="mb-2"> <i class="ri-star-fill
text-warning"></i> <i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i> <i class="ri-star-fill
text-warning"></i> <i class="ri-star-fill text-warning"></i>
</div> <p>“It was an outstanding experience from start to finish. Truly a team that
cares about all the details.”</p> <div class="d-flex align-items-center
mt-auto"> <span class="avatar avatar-md mb-0 me-3"> <img
src="https://placehold.co/128x128/31343C/EEE?text=J" alt="Avatar"
class="img-fluid rounded-circle" /> </span> <div> <h6
class="mb-2">Jane Smith</h6> <p class="mb-0">Product
Designer</p> </div> </div> </div> </div> </div> <div
class="swiper-slide" style="height: auto;"> <div class="card
bg-secondary shadow border-0 h-100 p-0"> <div class="card-body d-flex
flex-column p-3"> <div class="mb-2"> <i class="ri-star-fill
text-warning"></i> <i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i> <i class="ri-star-fill
text-warning"></i> <i class="ri-star-fill text-warning"></i>
</div> <p>“This platform made everything so simple and stress-free. I’m genuinely
impressed with the outcome!”</p> <div class="d-flex align-items-center
mt-auto"> <span class="avatar avatar-md mb-0 me-3"> <img
src="https://placehold.co/128x128/31343C/EEE?text=R" alt="Avatar"
class="img-fluid rounded-circle" /> </span> <div> <h6
class="mb-2">Reena Paul</h6> <p class="mb-0">HR
Manager</p> </div> </div> </div> </div> </div> <div
class="swiper-slide" style="height: auto;"> <div class="card
bg-secondary shadow border-0 h-100 p-0"> <div class="card-body d-flex
flex-column p-3"> <div class="mb-2"> <i class="ri-star-fill
text-warning"></i> <i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i> <i class="ri-star-fill
text-warning"></i> <i class="ri-star-half-fill
text-warning"></i> </div> <p>“They understood exactly what was needed
to be done and delivered beyond what I imagined.”</p> <div class="d-flex
align-items-center mt-auto"> <span class="avatar avatar-md mb-0 me-3">
<img src="https://placehold.co/128x128/31343C/EEE?text=N" alt="Avatar"
class="img-fluid rounded-circle" /> </span> <div> <h6
class="mb-2">Nguyen Minh</h6> <p class="mb-0">Software
Engineer</p> </div> </div> </div> </div> </div> <div
class="swiper-slide" style="height: auto;"> <div class="card
bg-secondary shadow border-0 h-100 p-0"> <div class="card-body d-flex
flex-column p-3"> <div class="mb-2"> <i class="ri-star-fill
text-warning"></i> <i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i> <i class="ri-star-fill
text-warning"></i> <i class="ri-star-fill text-warning"></i>
</div> <p>“It was an outstanding experience from start to finish. Truly a team that
cares about all the details.”</p> <div class="d-flex align-items-center
mt-auto"> <span class="avatar avatar-md mb-0 me-3"> <img
src="https://placehold.co/128x128/31343C/EEE?text=N" alt="Avatar"
class="img-fluid rounded-circle" /> </span> <div> <h6
class="mb-2">Neha Gupta</h6> <p class="mb-0">Content
Strategist</p> </div> </div> </div> </div> </div>
</div> <div class="swiper-pagination"></div> </div>
</div> </section>
.swiper-pagination-bullet {
background: var(--bs-primary);
}
.swiper-pagination-bullet-active {
background: var(--bs-primary);
}
.swiper-pagination-bullet { background: var(--bs-primary); } .swiper-pagination-bullet-active {
background: var(--bs-primary); }
document.addEventListener('DOMContentLoaded', () => {
var swiper = new Swiper(".ex4Swiper", {
slidesPerView: 1,
spaceBetween: 20,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
breakpoints: {
768: {
slidesPerView: 2,
spaceBetween: 30,
},
992: {
slidesPerView: 3,
spaceBetween: 30,
}
}
});
});
document.addEventListener('DOMContentLoaded', () => { var swiper = new
Swiper(".ex4Swiper", { slidesPerView: 1, spaceBetween: 20, pagination: { el:
".swiper-pagination", clickable: true, }, autoplay: { delay: 3000,
disableOnInteraction: false, }, breakpoints: { 768: { slidesPerView: 2, spaceBetween: 30, },
992: { slidesPerView: 3, spaceBetween: 30, } } }); });
Example 5
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet consectetur adipisicing elit."
Rahul Mehta
Marketing Head
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet consectetur adipisicing elit."
Reena Paul
HR Manager
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet consectetur adipisicing elit."
Aaron Thomas
UX Designer
<section class="bg-body py-5">
<div class="container text-bg-primary rounded-4 p-4">
<div class="swiper ex5Swiper">
<div class="swiper-wrapper mb-5">
<div class="swiper-slide">
<div class="col-lg-8 offset-lg-2 text-center">
<i class="ri-double-quotes-l opacity-25 display-5"></i>
<p class="mb-3">
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero
corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet consectetur
adipisicing elit."
</p>
<p class="fw-semibold fs-5 mb-2">Rahul Mehta</p>
<p class="mb-0">Marketing Head</p>
</div>
</div>
<div class="swiper-slide">
<div class="col-lg-8 offset-lg-2 text-center">
<i class="ri-double-quotes-l opacity-25 display-5"></i>
<p class="mb-3">
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero
corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet consectetur
adipisicing elit."
</p>
<p class="fw-semibold fs-5 mb-2">Reena Paul</p>
<p class="mb-0">HR Manager</p>
</div>
</div>
<div class="swiper-slide">
<div class="col-lg-8 offset-lg-2 text-center">
<i class="ri-double-quotes-l opacity-25 display-5"></i>
<p class="mb-3">
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero
corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet consectetur
adipisicing elit."
</p>
<p class="fw-semibold fs-5 mb-2">Aaron Thomas</p>
<p class="mb-0">UX Designer</p>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container text-bg-primary
rounded-4 p-4"> <div class="swiper ex5Swiper"> <div
class="swiper-wrapper mb-5"> <div class="swiper-slide"> <div
class="col-lg-8 offset-lg-2 text-center"> <i class="ri-double-quotes-l
opacity-25 display-5"></i> <p class="mb-3"> "Lorem ipsum
dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos
provident nulla nemo! Quam impedit dolores vel sit amet consectetur adipisicing elit."
</p> <p class="fw-semibold fs-5 mb-2">Rahul Mehta</p> <p
class="mb-0">Marketing Head</p> </div> </div> <div
class="swiper-slide"> <div class="col-lg-8 offset-lg-2
text-center"> <i class="ri-double-quotes-l opacity-25
display-5"></i> <p class="mb-3"> "Lorem ipsum dolor sit amet
consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident nulla
nemo! Quam impedit dolores vel sit amet consectetur adipisicing elit." </p> <p
class="fw-semibold fs-5 mb-2">Reena Paul</p> <p
class="mb-0">HR Manager</p> </div> </div> <div
class="swiper-slide"> <div class="col-lg-8 offset-lg-2
text-center"> <i class="ri-double-quotes-l opacity-25
display-5"></i> <p class="mb-3"> "Lorem ipsum dolor sit amet
consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident nulla
nemo! Quam impedit dolores vel sit amet consectetur adipisicing elit." </p> <p
class="fw-semibold fs-5 mb-2">Aaron Thomas</p> <p
class="mb-0">UX Designer</p> </div> </div> </div> <div
class="swiper-pagination"></div> </div> </div> </section>
.swiper-pagination-bullet {
background: var(--bs-muted);
}
.swiper-pagination-bullet-active {
background: var(--bs-secondary);
}
.swiper-pagination-bullet { background: var(--bs-muted); } .swiper-pagination-bullet-active {
background: var(--bs-secondary); }
document.addEventListener('DOMContentLoaded', () => {
var swiper = new Swiper(".ex5Swiper", {
slidesPerView: 1,
spaceBetween: 20,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
autoplay: {
delay: 3000,
disableOnInteraction: false,
}
});
});
document.addEventListener('DOMContentLoaded', () => { var swiper = new
Swiper(".ex5Swiper", { slidesPerView: 1, spaceBetween: 20, pagination: { el:
".swiper-pagination", clickable: true, }, autoplay: { delay: 3000,
disableOnInteraction: false, } }); });
Example 6
Testimonials
What people are saying about us
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet consectetur adipisicing elit."
Rahul Mehta
Marketing Head
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet consectetur adipisicing elit."
Jane Smith
Product Designer
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet consectetur adipisicing elit."
Nguyen Minh
Software Engineer
<section class="bg-body py-5">
<div class="container bg-secondary rounded-4 p-4">
<div class="text-md-center mt-4">
<h1 class="text-primary fw-semibold text-uppercase fs-5 mb-3">Testimonials</h1>
<h2 class="mb-3">What people are saying about us</h2>
</div>
<div class="col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
<div class="swiper ex6Swiper">
<div class="swiper-wrapper mb-5">
<div class="swiper-slide">
<div class="text-md-center">
<div class="mb-2">
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-half-fill text-warning"></i>
</div>
<p class="mb-4">
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero
corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet consectetur
adipisicing elit."
</p>
<div class="d-flex align-items-center justify-content-md-center">
<span class="avatar avatar-md mb-0 me-3">
<img src="https://placehold.co/128x128/31343C/EEE?text=R" alt="Avatar" class="img-fluid rounded-circle">
</span>
<div class="text-start">
<h6 class="mb-2">Rahul Mehta</h6>
<p class="mb-0">Marketing Head</p>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="text-md-center">
<div class="mb-2">
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-half-fill text-warning"></i>
</div>
<p class="mb-4">
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero
corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet consectetur
adipisicing elit."
</p>
<div class="d-flex align-items-center justify-content-md-center">
<span class="avatar avatar-md mb-0 me-3">
<img src="https://placehold.co/128x128/31343C/EEE?text=J" alt="Avatar" class="img-fluid rounded-circle">
</span>
<div class="text-start">
<h6 class="mb-2">Jane Smith</h6>
<p class="mb-0">Product Designer</p>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="text-md-center">
<div class="mb-2">
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i>
<i class="ri-star-half-fill text-warning"></i>
</div>
<p class="mb-4">
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero
corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet consectetur
adipisicing elit."
</p>
<div class="d-flex align-items-center justify-content-md-center">
<span class="avatar avatar-md mb-0 me-3">
<img src="https://placehold.co/128x128/31343C/EEE?text=N" alt="Avatar" class="img-fluid rounded-circle">
</span>
<div class="text-start">
<h6 class="mb-2">Nguyen Minh</h6>
<p class="mb-0">Software Engineer</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container bg-secondary
rounded-4 p-4"> <div class="text-md-center mt-4"> <h1
class="text-primary fw-semibold text-uppercase fs-5 mb-3">Testimonials</h1>
<h2 class="mb-3">What people are saying about us</h2> </div> <div
class="col-lg-8 offset-lg-2 col-xl-6 offset-xl-3"> <div class="swiper
ex6Swiper"> <div class="swiper-wrapper mb-5"> <div
class="swiper-slide"> <div class="text-md-center"> <div
class="mb-2"> <i class="ri-star-fill text-warning"></i> <i
class="ri-star-fill text-warning"></i> <i class="ri-star-fill
text-warning"></i> <i class="ri-star-fill text-warning"></i>
<i class="ri-star-half-fill text-warning"></i> </div> <p
class="mb-4"> "Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dolorum quibusdam, libero corporis dignissimos provident nulla nemo! Quam impedit dolores vel
sit amet consectetur adipisicing elit." </p> <div class="d-flex
align-items-center justify-content-md-center"> <span class="avatar avatar-md
mb-0 me-3"> <img src="https://placehold.co/128x128/31343C/EEE?text=R"
alt="Avatar" class="img-fluid rounded-circle"> </span> <div
class="text-start"> <h6 class="mb-2">Rahul Mehta</h6> <p
class="mb-0">Marketing Head</p> </div> </div> </div>
</div> <div class="swiper-slide"> <div
class="text-md-center"> <div class="mb-2"> <i
class="ri-star-fill text-warning"></i> <i class="ri-star-fill
text-warning"></i> <i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i> <i
class="ri-star-half-fill text-warning"></i> </div> <p
class="mb-4"> "Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dolorum quibusdam, libero corporis dignissimos provident nulla nemo! Quam impedit dolores vel
sit amet consectetur adipisicing elit." </p> <div class="d-flex
align-items-center justify-content-md-center"> <span class="avatar avatar-md
mb-0 me-3"> <img src="https://placehold.co/128x128/31343C/EEE?text=J"
alt="Avatar" class="img-fluid rounded-circle"> </span> <div
class="text-start"> <h6 class="mb-2">Jane Smith</h6> <p
class="mb-0">Product Designer</p> </div> </div> </div>
</div> <div class="swiper-slide"> <div
class="text-md-center"> <div class="mb-2"> <i
class="ri-star-fill text-warning"></i> <i class="ri-star-fill
text-warning"></i> <i class="ri-star-fill text-warning"></i>
<i class="ri-star-fill text-warning"></i> <i
class="ri-star-half-fill text-warning"></i> </div> <p
class="mb-4"> "Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dolorum quibusdam, libero corporis dignissimos provident nulla nemo! Quam impedit dolores vel
sit amet consectetur adipisicing elit." </p> <div class="d-flex
align-items-center justify-content-md-center"> <span class="avatar avatar-md
mb-0 me-3"> <img src="https://placehold.co/128x128/31343C/EEE?text=N"
alt="Avatar" class="img-fluid rounded-circle"> </span> <div
class="text-start"> <h6 class="mb-2">Nguyen Minh</h6> <p
class="mb-0">Software Engineer</p> </div> </div> </div>
</div> </div> <div class="swiper-pagination"></div>
</div> </div> </div> </section>
.swiper-pagination-bullet {
background: var(--bs-primary);
}
.swiper-pagination-bullet-active {
background: var(--bs-primary);
}
.swiper-pagination-bullet { background: var(--bs-primary); } .swiper-pagination-bullet-active {
background: var(--bs-primary); }
document.addEventListener('DOMContentLoaded', () => {
var swiper = new Swiper(".ex6Swiper", {
slidesPerView: 1,
spaceBetween: 20,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
autoplay: {
delay: 3000,
disableOnInteraction: false,
}
});
});
document.addEventListener('DOMContentLoaded', () => { var swiper = new
Swiper(".ex6Swiper", { slidesPerView: 1, spaceBetween: 20, pagination: { el:
".swiper-pagination", clickable: true, }, autoplay: { delay: 3000,
disableOnInteraction: false, } }); });
ESC