Bootstrap 5Content

Bootstrap 5 Testimonial Slider

A testimonial slider is a rotating set of customer or user quotes displayed one at a time, typically showing an avatar, name, role, and review text. It is composed from Bootstrap 5's built-in Carousel component (`#carouselExample` with `data-bs-ride`), Card markup, Flexbox utilities, and spacing classes. Use it on landing pages, product pages, and agency sites where social proof needs to cycle through multiple voices without consuming vertical space.

Primary Class

.carousel

Common Use Cases

→A SaaS product page cycles through five customer quotes with star ratings to build trust before the pricing section.
→A digital agency homepage rotates client testimonials with company logos and the client's job title beneath each quote.
→An e-commerce product detail page displays verified buyer reviews in a slider so shoppers see varied feedback without scrolling.
→A university course landing page shows student success stories with photos and graduation year to support enrolment decisions.

Variants & Classes

Variant	Description	Classes
Minimal Quote Slider	Plain centred quote text with author name and role, no card border, using only typography and carousel controls. Ideal for full-width hero-adjacent sections with a contrasting background.	`carousel carousel-dark text-center py-5`
Card with Avatar	Each slide wraps content in a Bootstrap card with a circular avatar image, five-star rating rendered from Unicode stars, quote body, and author metadata aligned with flexbox.	`carousel card shadow-sm p-4 d-flex align-items-center`
Multi-column Peek Slider	Shows the active testimonial at full width while partially revealing the next card on the right using overflow-hidden and a negative margin technique, giving a visual cue that more slides exist.	`carousel overflow-hidden`
Dark Background Slider	Carousel placed inside a `bg-dark text-white` section with light card variants and white text utilities for high-contrast presentation on dark-themed pages.	`carousel bg-dark text-white py-5`

Code Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Testimonial Slider</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
  <style>
    .testimonial-avatar {
      width: 72px;
      height: 72px;
      object-fit: cover;
    }
    .star-rating {
      color: #f5a623;
      font-size: 1.1rem;
      letter-spacing: 2px;
    }
    .carousel-control-prev,
    .carousel-control-next {
      width: 3rem;
    }
    .carousel-indicators [data-bs-target] {
      background-color: #6c757d;
    }
  </style>
</head>
<body class="bg-light py-5">
<section class="container">
  <div class="row justify-content-center">
    <div class="col-lg-8">
      <h2 class="text-center fw-bold mb-4">What our customers say</h2>

      <div id="testimonialSlider" class="carousel slide" data-bs-ride="carousel" data-bs-interval="6000">

        <!-- Indicators -->
        <div class="carousel-indicators">
          <button type="button" data-bs-target="#testimonialSlider" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Testimonial 1"></button>
          <button type="button" data-bs-target="#testimonialSlider" data-bs-slide-to="1" aria-label="Testimonial 2"></button>
          <button type="button" data-bs-target="#testimonialSlider" data-bs-slide-to="2" aria-label="Testimonial 3"></button>
        </div>

        <!-- Slides -->
        <div class="carousel-inner pb-5">

          <!-- Slide 1 -->
          <div class="carousel-item active">
            <div class="card border-0 shadow-sm mx-auto" style="max-width:640px">
              <div class="card-body p-4 p-md-5 text-center">
                <div class="star-rating mb-3" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
                <blockquote class="blockquote mb-4">
                  <p class="fs-5 fst-italic text-secondary">&ldquo;Switching to this platform cut our onboarding time in half. The team was up and running within a day and the support is genuinely excellent.&rdquo;</p>
                </blockquote>
                <div class="d-flex align-items-center justify-content-center gap-3">
                  <img src="https://i.pravatar.cc/72?img=47" alt="Portrait of Sarah Mitchell" class="testimonial-avatar rounded-circle">
                  <div class="text-start">
                    <p class="fw-semibold mb-0">Sarah Mitchell</p>
                    <p class="text-muted small mb-0">Head of Operations, Verdant Logistics</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Slide 2 -->
          <div class="carousel-item">
            <div class="card border-0 shadow-sm mx-auto" style="max-width:640px">
              <div class="card-body p-4 p-md-5 text-center">
                <div class="star-rating mb-3" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
                <blockquote class="blockquote mb-4">
                  <p class="fs-5 fst-italic text-secondary">&ldquo;The analytics dashboard alone is worth the subscription. We finally have clear visibility into which campaigns are actually driving revenue.&rdquo;</p>
                </blockquote>
                <div class="d-flex align-items-center justify-content-center gap-3">
                  <img src="https://i.pravatar.cc/72?img=12" alt="Portrait of James Okafor" class="testimonial-avatar rounded-circle">
                  <div class="text-start">
                    <p class="fw-semibold mb-0">James Okafor</p>
                    <p class="text-muted small mb-0">Marketing Director, Pulse Agency</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Slide 3 -->
          <div class="carousel-item">
            <div class="card border-0 shadow-sm mx-auto" style="max-width:640px">
              <div class="card-body p-4 p-md-5 text-center">
                <div class="star-rating mb-3" aria-label="4 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9734;</div>
                <blockquote class="blockquote mb-4">
                  <p class="fs-5 fst-italic text-secondary">&ldquo;Integration with our existing tools was painless. Their documentation is thorough and the API is logical. Highly recommended for technical teams.&rdquo;</p>
                </blockquote>
                <div class="d-flex align-items-center justify-content-center gap-3">
                  <img src="https://i.pravatar.cc/72?img=31" alt="Portrait of Priya Nair" class="testimonial-avatar rounded-circle">
                  <div class="text-start">
                    <p class="fw-semibold mb-0">Priya Nair</p>
                    <p class="text-muted small mb-0">Lead Developer, Stackframe Ltd</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div><!-- /.carousel-inner -->

        <!-- Controls -->
        <button class="carousel-control-prev" type="button" data-bs-target="#testimonialSlider" data-bs-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-bs-target="#testimonialSlider" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>

      </div><!-- /#testimonialSlider -->
    </div>
  </div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Live Examples

Minimal centred quote, dark carousel

A stripped-back slider with no card border, centred large quote text, and the dark carousel variant so the previous/next arrow icons are visible on a light background. Paste this inside any existing section element.

Example 1

Dark background testimonial slider

The carousel is placed inside a bg-dark section with white text and a subtle border card, suitable for the footer area of a marketing page or a standalone testimonials section with a dark theme.

Example 2

Logo + quote slider for B2B social proof

Each slide includes a greyscale company logo above the quote, reinforcing brand credibility for a B2B SaaS product page. The logo is constrained to a fixed height with object-fit utilities.

Example 3

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Card with circular avatar, star rating, and auto-advancing carousel
✓Minimal centred quote slider on a light section background
✓Dark-theme slider with semi-transparent card for agency homepages
✓B2B logo-above-quote rotating testimonial block
✓Full-bleed background-image section with white text testimonials generated from a prompt

Best Practices

Prevent layout shift from variable quote lengths

Set a `min-height` on `.carousel-inner` or on each `.carousel-item` wrapper to match your longest expected quote. Without this, the slider height collapses and expands as slides change, causing the content below to jump. Use a CSS custom property or inline style to lock the height consistently across breakpoints.

Use data-bs-interval wisely for readability

The default Bootstrap carousel interval is 5000 ms, which is too short for longer testimonial quotes. Set `data-bs-interval="7000"` or higher on the `.carousel` element, and consider adding `data-bs-pause="hover"` so the timer resets when a keyboard or pointer user interacts with the slide. This avoids the slide advancing mid-read.

Accessibility: announce slide changes to screen readers

Bootstrap's carousel does not automatically announce slide content changes to screen readers. Add `aria-live="polite"` to a visually hidden element inside the carousel and update its text content with JavaScript on the `slid.bs.carousel` event, or ensure each `.carousel-item` has a meaningful `aria-label`. The carousel control buttons must always include `.visually-hidden` text for their purpose.

Avoid relying on carousel-control arrow visibility on light slides

Bootstrap's default `.carousel-control-prev-icon` and `.carousel-control-next-icon` are white SVGs, invisible against white card backgrounds. Either use `.carousel-dark` to switch them to dark icons, or position the controls outside the slide area using negative margin and a contrasting background colour so they remain visible regardless of slide content.

FAQ

Does Bootstrap 5 have an official testimonial slider component?

No. Bootstrap 5 ships a generic Carousel component for cycling arbitrary content, but there is no dedicated testimonial slider. This pattern composes the Carousel primitive with Card markup, Flexbox utilities, and blockquote typography to create the testimonial-specific layout.

How do I show multiple testimonials side by side rather than one at a time?

Group multiple card columns inside a single `.carousel-item` using Bootstrap's grid (`col-md-4` inside a `row`). Each `.carousel-item` then contains a full row of cards, so the slide advances the entire group. Combine this with a responsive breakpoint so mobile falls back to a single card per slide.

How can I pause the slider autoplay when a user is reading?

Add `data-bs-pause="hover"` to the `.carousel` element. Bootstrap will pause the interval while the pointer is over the carousel and resume when it leaves. For keyboard users, call `bootstrap.Carousel.getInstance(el).pause()` on focus and `.cycle()` on blur using a short JavaScript snippet attached to the focusin and focusout events on the carousel container.

Can I add a fade transition instead of a slide transition between testimonials?

Yes. Add the `.carousel-fade` class alongside `.carousel` on the outer element. Bootstrap applies a CSS opacity cross-fade between slides instead of the default horizontal translate. This is particularly effective for testimonial sliders where a horizontal slide motion can feel distracting when the only change is text content.