Testimonial Slider
Bootstrap Testimonial Slider - free examples & tutorial
Testimonial Slider Template
A basic example of a responsive testimonial carousel with a single review per slide. Each review contains the customers profile picture, a stylized review quotation and a star rating.
.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" data-mdb-carousel-init 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://mdbcdn.b-cdn.net/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://mdbcdn.b-cdn.net/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://mdbcdn.b-cdn.net/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 a multi item carousel. More reviews on a single slide, ideal for landing pages, pricing pages, or even in a shopping cart to encourage the customer during the last step of the purchase.
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" data-mdb-carousel-init 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://mdbcdn.b-cdn.net/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://mdbcdn.b-cdn.net/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://mdbcdn.b-cdn.net/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://mdbcdn.b-cdn.net/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://mdbcdn.b-cdn.net/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://mdbcdn.b-cdn.net/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://mdbcdn.b-cdn.net/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://mdbcdn.b-cdn.net/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://mdbcdn.b-cdn.net/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 -->