Bootstrap 5 Testimonial Slider with Thumbnails (4 Templates)

Sometimes, when building websites you need to create a section where you show your best testimonials to create more “social proof” and help you get new clients or sell your products.

Bootstrap makes creating testimonial sliders quite easy with its ready-to-use components.

Today, I’ve created 4 different testimonial sliders with thumbnails using Bootstrap 5 and its Tabbed component.

I’ve also used one of these testimonial sliders in the Jona free business template.

So, below you can see the 4 different testimonial sliders. In the end, you can also download the templates. Enjoy!

With Fullscreen Background

I’ll also show the HTML and CSS code for this first slider. For the other sliders the code is very similar with just a few changes.

The HTML

<!-- Testimonials 1 -->
<div class="py-5 text-center text-white" id="testimonials-1">
  <div class="container">
    <div class="row">
      <div class="col mt-2 pe-md-5 pb-2">
        <h3 class="text-uppercase">Our Best Testimonials:</h3>
        <!-- Tabbed component -->
        <div class="tab-content" id="t1-pills-tabContent">
          <div class="tab-pane fade show active lead" id="t1-pills-1" role="tabpanel" aria-labelledby="t1-pills-1-tab" tabindex="0">
            Ut wisi enim ad <a class="azm-border-dashed text-white" href="#">minim veniam</a>, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl.
            <br>
            <a href="#" class="fst-italic azm-border-dashed text-white">John Doe, johndoe.com</a>
          </div>
          <div class="tab-pane fade lead" id="t1-pills-2" role="tabpanel" aria-labelledby="t1-pills-2-tab" tabindex="0">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.
            <br>
            <a href="#" class="fst-italic azm-border-dashed text-white">Jane Jonsson, blog.jane.com</a>
          </div>
          <div class="tab-pane fade lead" id="t1-pills-3" role="tabpanel" aria-labelledby="t1-pills-3-tab" tabindex="0">
            Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl.
            <br>
            <a href="#" class="fst-italic azm-border-dashed text-white">John Doe, johndoe.com</a>
          </div>
          <div class="tab-pane fade lead" id="t1-pills-4" role="tabpanel" aria-labelledby="t1-pills-4-tab" tabindex="0">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et.
            <br>
            <a href="#" class="fst-italic azm-border-dashed text-white">Jane Jonsson, blog.jane.com</a>
          </div>
        </div>
        <ul class="nav nav-pills mt-4 justify-content-center" id="t1-pills-tab" role="tablist">
          <li class="nav-item" role="presentation">
            <a href="#" class="active d-inline-block p-2" id="t1-pills-1-tab" data-bs-toggle="pill" data-bs-target="#t1-pills-1" role="tab" aria-controls="t1-pills-1" aria-selected="true">
              <img class="img-fluid rounded shadow" src="assets/testimonials/1.jpg" alt="testimonial-1">
            </a>
          </li>
          <li class="nav-item" role="presentation">
            <a href="#" class="d-inline-block p-2" id="t1-pills-2-tab" data-bs-toggle="pill" data-bs-target="#t1-pills-2" role="tab" aria-controls="t1-pills-2" aria-selected="false">
              <img class="img-fluid rounded shadow" src="assets/testimonials/2.jpg" alt="testimonial-2">
            </a>
          </li>
          <li class="nav-item" role="presentation">
            <a href="#" class="d-inline-block p-2" id="t1-pills-3-tab" data-bs-toggle="pill" data-bs-target="#t1-pills-3" role="tab" aria-controls="t1-pills-3" aria-selected="false">
              <img class="img-fluid rounded shadow" src="assets/testimonials/3.jpg" alt="testimonial-3">
            </a>
          </li>
          <li class="nav-item" role="presentation">
            <a href="#" class="d-inline-block p-2" id="t1-pills-4-tab" data-bs-toggle="pill" data-bs-target="#t1-pills-4" role="tab" aria-controls="t1-pills-4" aria-selected="false">
              <img class="img-fluid rounded shadow" src="assets/testimonials/4.jpg" alt="testimonial-4">
            </a>
          </li>
        </ul>
        <!-- End of Tabbed component -->
      </div>
    </div>
  </div>
</div>

The CSS

/* Testimonials 1 */

#testimonials-1 {
  background-image: url(assets/bg-1.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#testimonials-1 .tab-content a:hover,
#testimonials-1 .tab-content a:focus { border: 0; }

#testimonials-1 .nav-pills .nav-item a { opacity: 0.6; width: 80px; }

#testimonials-1 .nav-pills .nav-item a.active { opacity: 1; }

#testimonials-1 .nav-pills .nav-item a:hover,
#testimonials-1 .nav-pills .nav-item a:focus { opacity: 1; }

#testimonials-1 .nav-pills .nav-item a.active img,
#testimonials-1 .nav-pills .nav-item a:hover img,
#testimonials-1 .nav-pills .nav-item a:focus img {
  transition: all .15s ease-in-out;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3) !important;
}

.testimonials-1-icon {
  font-size: 15rem;
  line-height: 1rem;
  color: #eee;
}

Left-Aligned with Right Icon

Center-Aligned

Dark Background

DEMO and DOWNLOAD

LIVE PREVIEW

SUBSCRIBE TO DOWNLOAD THE TEMPLATES