Testimonial Slider
Bootstrap Testimonial Slider - examples & tutorial
Responsive examples of testimonial sliders. This custom component is a combination of Bootstrap Carousel and Testimonials.
To learn more read Carousel Docs.
Basic example
Basic example with a single testimonial per slide
.webp)
Maria Kate
Photographer
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus et deleniti nesciunt sint eligendi reprehenderit reiciendis, quibusdam illo, beatae quia fugit consequatur laudantium velit magnam error. Consectetur distinctio fugit doloremque.
.webp)
John Doe
Web Developer
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus et deleniti nesciunt sint eligendi reprehenderit reiciendis.
.webp)
Anna Deynah
UX Designer
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus et deleniti nesciunt sint eligendi reprehenderit reiciendis, quibusdam illo, beatae quia fugit consequatur laudantium velit magnam error. Consectetur distinctio fugit doloremque.
<!-- Carousel wrapper -->
<div
id="carouselExampleControls"
class="carousel slide text-center carousel-dark"
data-mdb-ride="carousel"
>
<div class="carousel-inner">
<div class="carousel-item active">
<img
class="rounded-circle shadow-1-strong mb-4"
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).webp"
alt="avatar"
style="width: 150px;"
/>
<div class="row d-flex justify-content-center">
<div class="col-lg-8">
<h5 class="mb-3">Maria Kate</h5>
<p>Photographer</p>
<p class="text-muted">
<i class="fas fa-quote-left pe-2"></i>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus et deleniti
nesciunt sint eligendi reprehenderit reiciendis, quibusdam illo, beatae quia
fugit consequatur laudantium velit magnam error. Consectetur distinctio fugit
doloremque.
</p>
</div>
</div>
<ul class="list-unstyled d-flex justify-content-center text-warning mb-0">
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="far fa-star fa-sm"></i></li>
</ul>
</div>
<div class="carousel-item">
<img
class="rounded-circle shadow-1-strong mb-4"
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(32).webp"
alt="avatar"
style="width: 150px;"
/>
<div class="row d-flex justify-content-center">
<div class="col-lg-8">
<h5 class="mb-3">John Doe</h5>
<p>Web Developer</p>
<p class="text-muted">
<i class="fas fa-quote-left pe-2"></i>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus et deleniti
nesciunt sint eligendi reprehenderit reiciendis.
</p>
</div>
</div>
<ul class="list-unstyled d-flex justify-content-center text-warning mb-0">
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="far fa-star fa-sm"></i></li>
</ul>
</div>
<div class="carousel-item">
<img
class="rounded-circle shadow-1-strong mb-4"
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).webp"
alt="avatar"
style="width: 150px;"
/>
<div class="row d-flex justify-content-center">
<div class="col-lg-8">
<h5 class="mb-3">Anna Deynah</h5>
<p>UX Designer</p>
<p class="text-muted">
<i class="fas fa-quote-left pe-2"></i>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus et deleniti
nesciunt sint eligendi reprehenderit reiciendis, quibusdam illo, beatae quia
fugit consequatur laudantium velit magnam error. Consectetur distinctio fugit
doloremque.
</p>
</div>
</div>
<ul class="list-unstyled d-flex justify-content-center text-warning mb-0">
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="far fa-star fa-sm"></i></li>
</ul>
</div>
</div>
<button
class="carousel-control-prev"
type="button"
data-mdb-target="#carouselExampleControls"
data-mdb-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next"
type="button"
data-mdb-target="#carouselExampleControls"
data-mdb-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- Carousel wrapper -->
Multiitem carousel
An example of the usage with multi item carousel.
Anna Deynah
UX Designer
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab hic tenetur.
John Doe
Web Developer
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid commodi.
Maria Kate
Photographer
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.
.webp)
John Doe
UX Designer
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab hic tenetur.
.webp)
Alex Rey
Web Developer
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid commodi.
.webp)
Maria Kate
Photographer
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.
.webp)
Anna Deynah
UX Designer
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab hic tenetur.
.webp)
John Doe
Web Developer
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid commodi.
.webp)
Maria Kate
Photographer
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.
<!-- Carousel wrapper -->
<div
id="carouselMultiItemExample"
class="carousel slide carousel-dark text-center"
data-mdb-ride="carousel"
>
<!-- Controls -->
<div class="d-flex justify-content-center mb-4">
<button
class="carousel-control-prev position-relative"
type="button"
data-mdb-target="#carouselMultiItemExample"
data-mdb-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next position-relative"
type="button"
data-mdb-target="#carouselMultiItemExample"
data-mdb-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- Inner -->
<div class="carousel-inner py-4">
<!-- Single item -->
<div class="carousel-item active">
<div class="container">
<div class="row">
<div class="col-lg-4">
<img
class="rounded-circle shadow-1-strong mb-4"
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).webp"
alt="avatar"
style="width: 150px;"
/>
<h5 class="mb-3">Anna Deynah</h5>
<p>UX Designer</p>
<p class="text-muted">
<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 text-warning mb-0">
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
</ul>
</div>
<div class="col-lg-4 d-none d-lg-block">
<img
class="rounded-circle shadow-1-strong mb-4"
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(32).webp"
alt="avatar"
style="width: 150px;"
/>
<h5 class="mb-3">John Doe</h5>
<p>Web Developer</p>
<p class="text-muted">
<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 text-warning mb-0">
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li>
<i class="fas fa-star-half-alt fa-sm"></i>
</li>
</ul>
</div>
<div class="col-lg-4 d-none d-lg-block">
<img
class="rounded-circle shadow-1-strong mb-4"
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).webp"
alt="avatar"
style="width: 150px;"
/>
<h5 class="mb-3">Maria Kate</h5>
<p>Photographer</p>
<p class="text-muted">
<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 text-warning mb-0">
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="far fa-star fa-sm"></i></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<div class="container">
<div class="row">
<div class="col-lg-4">
<img
class="rounded-circle shadow-1-strong mb-4"
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(3).webp"
alt="avatar"
style="width: 150px;"
/>
<h5 class="mb-3">John Doe</h5>
<p>UX Designer</p>
<p class="text-muted">
<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 text-warning mb-0">
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
</ul>
</div>
<div class="col-lg-4 d-none d-lg-block">
<img
class="rounded-circle shadow-1-strong mb-4"
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(4).webp"
alt="avatar"
style="width: 150px;"
/>
<h5 class="mb-3">Alex Rey</h5>
<p>Web Developer</p>
<p class="text-muted">
<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 text-warning mb-0">
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li>
<i class="fas fa-star-half-alt fa-sm"></i>
</li>
</ul>
</div>
<div class="col-lg-4 d-none d-lg-block">
<img
class="rounded-circle shadow-1-strong mb-4"
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(5).webp"
alt="avatar"
style="width: 150px;"
/>
<h5 class="mb-3">Maria Kate</h5>
<p>Photographer</p>
<p class="text-muted">
<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 text-warning mb-0">
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="far fa-star fa-sm"></i></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<div class="container">
<div class="row">
<div class="col-lg-4">
<img
class="rounded-circle shadow-1-strong mb-4"
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(6).webp"
alt="avatar"
style="width: 150px;"
/>
<h5 class="mb-3">Anna Deynah</h5>
<p>UX Designer</p>
<p class="text-muted">
<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 text-warning mb-0">
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
</ul>
</div>
<div class="col-lg-4 d-none d-lg-block">
<img
class="rounded-circle shadow-1-strong mb-4"
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(8).webp"
alt="avatar"
style="width: 150px;"
/>
<h5 class="mb-3">John Doe</h5>
<p>Web Developer</p>
<p class="text-muted">
<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 text-warning mb-0">
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li>
<i class="fas fa-star-half-alt fa-sm"></i>
</li>
</ul>
</div>
<div class="col-lg-4 d-none d-lg-block">
<img
class="rounded-circle shadow-1-strong mb-4"
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(7).webp"
alt="avatar"
style="width: 150px;"
/>
<h5 class="mb-3">Maria Kate</h5>
<p>Photographer</p>
<p class="text-muted">
<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 text-warning mb-0">
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="far fa-star fa-sm"></i></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Inner -->
</div>
<!-- Carousel wrapper -->