Skip to content
Testimonial Widget
Menu

A Bootstrap testimonial slider, for Bootstrap 5 and 4

A testimonial slider built on Bootstrap’s own carousel, with live demos and code to copy for Bootstrap 5 and Bootstrap 4, and what differs between the two.

Published

If your site already uses Bootstrap, you do not need another library for a testimonial slider. Bootstrap's own carousel does it. This guide has the code for Bootstrap 5, the same code for Bootstrap 4, and a note on what the two do differently.

What it looks like

One testimonial shows at a time, and the buttons move to the next. The testimonials are samples written for this guide.

The code for Bootstrap 5

Paste this where the slider should appear. It was tried with Bootstrap 5.3.8.

Testimonial slider: Bootstrap 5

<!-- Sample testimonials. Replace them with your customers' own words. -->
<section id="testimonials" class="carousel slide testimonial-slider" aria-label="Customer testimonials">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <figure class="mx-auto mb-0 text-center">
        <blockquote class="blockquote">“They rebuilt our booking page in a week. Online bookings went from four a week to eleven.”</blockquote>
        <figcaption><strong>Dana R.</strong><br>Studio owner, Leeds</figcaption>
      </figure>
    </div>
    <div class="carousel-item">
      <figure class="mx-auto mb-0 text-center">
        <blockquote class="blockquote">“I expected to wait days for an answer. The reply came in an hour, and it fixed the problem.”</blockquote>
        <figcaption><strong>Tomás G.</strong><br>Shop manager, Valencia</figcaption>
      </figure>
    </div>
    <div class="carousel-item">
      <figure class="mx-auto mb-0 text-center">
        <blockquote class="blockquote">“We had tried two other suppliers. This is the first one that delivered on the day it promised.”</blockquote>
        <figcaption><strong>Aiko M.</strong><br>Café owner, Osaka</figcaption>
      </figure>
    </div>
    <div class="carousel-item">
      <figure class="mx-auto mb-0 text-center">
        <blockquote class="blockquote">“Clear quote, no surprises on the invoice, and the work was finished a day early.”</blockquote>
        <figcaption><strong>Priya S.</strong><br>Homeowner, Pune</figcaption>
      </figure>
    </div>
  </div>
  <div class="d-flex justify-content-center mt-3">
    <button type="button" class="btn btn-outline-primary mx-1" data-bs-target="#testimonials" data-bs-slide="prev">Previous</button>
    <button type="button" class="btn btn-outline-primary mx-1" data-bs-target="#testimonials" data-bs-slide="next">Next</button>
  </div>
</section>

<style>
  .testimonial-slider .carousel-item {
    min-height: 11rem; /* room for your longest testimonial, so the buttons stay put */
  }
  .testimonial-slider figure {
    max-width: 40rem;
    padding: 0 1rem;
  }
  .testimonial-slider figcaption {
    color: #5c6370;
  }
</style>

If the page does not load Bootstrap yet

The slider needs Bootstrap's stylesheet and its JavaScript. A page built with Bootstrap has both already. If yours does not, these are Bootstrap's own lines for loading them:

Bootstrap 5: stylesheet and script

<!-- In the page's <head> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">

<!-- Just before </body> -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

How it works

  • It is Bootstrap's carousel. The classes carousel, carousel-inner and carousel-item are Bootstrap's. The slide with the class active is the one that shows first.
  • The buttons sit under the quotes. Bootstrap's usual arrows lie on top of the slide and are white, which suits photos and hides on a light page. Here two ordinary buttons point at the slider with data-bs-target, so they can go anywhere.
  • It stays still until asked. The slider moves only when a visitor presses a button or swipes.
  • It respects reduced motion. Bootstrap drops the sliding animation for visitors who have asked their device to reduce motion.

Make it yours

  • Your testimonials. Each one is a block from <div class="carousel-item"> to its closing </div>. Copy a block to add one, and keep active on one block only. Use what the customer wrote, with their agreement.
  • The name. The slider's id is testimonials, and both buttons point at #testimonials. For a second slider on the same page, give it another id and change its buttons to match.
  • Colours. The buttons use your theme's primary colour through btn-outline-primary. Any Bootstrap button class works in its place.
  • Height. min-height keeps the buttons from moving when a short testimonial follows a long one. Raise it until your longest testimonial fits on a phone.

Swipe from the first touch

Bootstrap switches on swiping for a slider only after one of its buttons has been pressed. To have it from the start, add this after Bootstrap's script:

Start the slider: Bootstrap 5

<script>
  new bootstrap.Carousel(document.querySelector("#testimonials"));
</script>

Should it move on its own?

Leave it still. Text that slides away before it has been read is a problem for many readers, and this slider has no button to pause it. Bootstrap's own documentation recommends against carousels that play by themselves, and says that one that does should have a control to pause or stop it.

If you add such a control, the attribute that starts the slider is data-bs-ride="carousel" on its first tag. It then changes slide every five seconds.

The code for Bootstrap 4

Bootstrap 4 no longer receives updates, but many sites still run on it. This is the same slider for Bootstrap 4.6.2.

Testimonial slider: Bootstrap 4

<!-- Sample testimonials. Replace them with your customers' own words. -->
<section id="testimonials" class="carousel slide testimonial-slider" data-interval="false" aria-label="Customer testimonials">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <figure class="mx-auto mb-0 text-center">
        <blockquote class="blockquote">“They rebuilt our booking page in a week. Online bookings went from four a week to eleven.”</blockquote>
        <figcaption><strong>Dana R.</strong><br>Studio owner, Leeds</figcaption>
      </figure>
    </div>
    <div class="carousel-item">
      <figure class="mx-auto mb-0 text-center">
        <blockquote class="blockquote">“I expected to wait days for an answer. The reply came in an hour, and it fixed the problem.”</blockquote>
        <figcaption><strong>Tomás G.</strong><br>Shop manager, Valencia</figcaption>
      </figure>
    </div>
    <div class="carousel-item">
      <figure class="mx-auto mb-0 text-center">
        <blockquote class="blockquote">“We had tried two other suppliers. This is the first one that delivered on the day it promised.”</blockquote>
        <figcaption><strong>Aiko M.</strong><br>Café owner, Osaka</figcaption>
      </figure>
    </div>
    <div class="carousel-item">
      <figure class="mx-auto mb-0 text-center">
        <blockquote class="blockquote">“Clear quote, no surprises on the invoice, and the work was finished a day early.”</blockquote>
        <figcaption><strong>Priya S.</strong><br>Homeowner, Pune</figcaption>
      </figure>
    </div>
  </div>
  <div class="d-flex justify-content-center mt-3">
    <button type="button" class="btn btn-outline-primary mx-1" data-target="#testimonials" data-slide="prev">Previous</button>
    <button type="button" class="btn btn-outline-primary mx-1" data-target="#testimonials" data-slide="next">Next</button>
  </div>
</section>

<style>
  .testimonial-slider .carousel-item {
    min-height: 11rem; /* room for your longest testimonial, so the buttons stay put */
  }
  .testimonial-slider figure {
    max-width: 40rem;
    padding: 0 1rem;
  }
  .testimonial-slider figcaption {
    color: #5c6370;
  }
</style>

Three things differ from the Bootstrap 5 code:

  • The attributes have no bs. Bootstrap 4 reads data-target and data-slide. Bootstrap 5 reads data-bs-target and data-bs-slide, and ignores the old names.
  • It needs jQuery. Bootstrap 4's JavaScript runs on jQuery, loaded before it.
  • data-interval="false" keeps it still. Without it, a Bootstrap 4 carousel starts moving on its own once a visitor has pressed a button and moved the pointer away. In a trial with Bootstrap 4.6.2 it changed slide within six seconds.

If the page does not load Bootstrap 4 yet, these are Bootstrap's own lines:

Bootstrap 4: stylesheet and scripts

<!-- In the page's <head> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<!-- Just before </body> -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

And to switch on swiping from the start, after those scripts:

Start the slider: Bootstrap 4

<script>
  $("#testimonials").carousel();
</script>

What Bootstrap's carousel does not do

  • It shows one testimonial at a time. For several cards side by side, the HTML testimonial slider does that with no library at all.
  • Every change is an edit. A new testimonial means opening the page and changing the HTML.
  • Reviews do not come in on their own. Reviews on Google or another site have to be typed in, and they do not update.

If you would rather keep your testimonials in one list and change them without touching the page, build the widget instead. A carousel can be published on ReTestimonial's free plan with up to 10 testimonials, and its snippet goes into a Bootstrap page like any other HTML page. To show reviews from a review site, see the review widgets.