How to create a responsive testimonials section in Bootstrap

Create a responsive layout using Bootstrap's grid system (col-md-6 and col-lg-4), ensuring that 1 medium screen, 2 large screens are displayed on each line on a small screen; 2. Use practical classes such as h-100, bg-light, shadow-sm, rounded, p-4 and d-flex to improve visual consistency and aesthetics, and add reference icons to enhance design; 3. Optionally use Bootstrap carousel to save space, making the content more compact and suitable for mobile devices; 4. Add custom CSS as needed to adjust the background color or control button style to optimize details; finally, professional and responsive test area construction is completed by using consistent image sizes, concise text, responsive testing and lazy loading of pictures. The entire process can be completed only by constructing structure, beautifying and testing verification.

Creating a responsive testimonials section in Bootstrap is straightforward, especially with Bootstrap's built-in grid system and utilities. Here's how you can build an attractive and fully responsive testimonials section using Bootstrap 5.

1. Use the Bootstrap Grid for Layout

Start by structuring your testimonials using Bootstrap's responsive grid system ( row and col-* classes). This ensures the layout adapts to different screen sizes.

 <section class="py-5">
  <div class="container">
    <h2 class="text-center mb-4">What Our Customers Say</h2>
    <div class="row">
      <!-- Testimonial 1 -->
      <div class="col-md-6 col-lg-4 mb-4">
        <div class="p-4 bg-light h-100 shadow-sm rounded">
          <p class="mb-4">"This product changed the way I work. Highly recommend it!"</p>
          <div class="d-flex align-items-center">
            <img class="rounded-circle me-3 lazy"  src="/static/imghw/default1.png"  data-src="user1.jpg"  alt="How to create a responsive testimonials section in Bootstrap"    style="max-width:90%"  style="max-width:90%">
            <div>
              <h6 class="mb-0">John Doe</h6>
              <small class="text-muted">Marketing Director</small>
            </div>
          </div>
        </div>
      </div>

      <!-- Testimonial 2 -->
      <div class="col-md-6 col-lg-4 mb-4">
        <div class="p-4 bg-light h-100 shadow-sm rounded">
          <p class="mb-4">"Excellent service and fast delivery. Will definitely buy again."</p>
          <div class="d-flex align-items-center">
            <img class="rounded-circle me-3 lazy"  src="/static/imghw/default1.png"  data-src="user2.jpg"  alt="How to create a responsive testimonials section in Bootstrap"    style="max-width:90%"  style="max-width:90%">
            <div>
              <h6 class="mb-0">Jane Smith</h6>
              <small class="text-muted">Freelance Designer</small>
            </div>
          </div>
        </div>
      </div>

      <!-- Testimonial 3 -->
      <div class="col-md-6 col-lg-4 mb-4">
        <div class="p-4 bg-light h-100 shadow-sm rounded">
          <p class="mb-4">"Outstanding quality and great customer support."</p>
          <div class="d-flex align-items-center">
            <img class="rounded-circle me-3 lazy"  src="/static/imghw/default1.png"  data-src="user3.jpg"  alt="How to create a responsive testimonials section in Bootstrap"    style="max-width:90%"  style="max-width:90%">
            <div>
              <h6 class="mb-0">Alex Johnson</h6>
              <small class="text-muted">Project Manager</small>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Note: Using col-md-6 means two cards per row on medium screens and above, and one on small screens. col-lg-4 gives you three per row on large screens.

2. Make It Visually Consistent with Helper Classes

Use utility classes to improve appearance and responsiveness:

• h-100 on the card ensures all boxes have equal height.
• bg-light , shadow-sm , and rounded add visual polish.
• p-4 adds internal padding.
• d-flex and align-items-center neatly align the user image and info.

You can also add a quotation icon using Bootstrap Icons or Font Awesome:

 <i class="bi bi-quote text-primary fs-1"></i>

Place it before the testimonial text for extra styling.

3. (Optional) Use Carousel for Space Efficiency

If you have many testimonials and want to save space, use Bootstrap's carousel:

 <div id="testimonialsCarousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="p-4 bg-light rounded shadow-sm">
        <p>"Best experience I&#39;ve had in years!"</p>
        <div class="d-flex align-items-center">
          <img class="rounded-circle me-3 lazy"  src="/static/imghw/default1.png"  data-src="user1.jpg"     style="max-width:90%"  style="max-width:90%" alt="How to create a responsive testimonials section in Bootstrap">
          <div>
            <h6 class="mb-0">John Doe</h6>
            <small class="text-muted">CEO, Company</small>
          </div>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="p-4 bg-light rounded shadow-sm">
        <p>"Fast, reliable, and professional."</p>
        <div class="d-flex align-items-center">
          <img class="rounded-circle me-3 lazy"  src="/static/imghw/default1.png"  data-src="user2.jpg"     style="max-width:90%"  style="max-width:90%" alt="How to create a responsive testimonials section in Bootstrap">
          <div>
            <h6 class="mb-0">Jane Smith</h6>
            <small class="text-muted">Designer</small>
          </div>
        </div>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#testimonialsCarousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#testimonialsCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

This keeps the section compact and engaging, especially on mobile.

4. Add Custom CSS (If Needed)

Sometimes Bootstrap's default spacing isn't enough. Add minimal custom CSS for better control:

 .testimonial-section {
  background-color: #f8f9fa;
}

.carousel-control-prev,
.carousel-control-next {
  filter: invert(1);
}

Link this in your or include in your main stylesheet.

Final Tips

• Always use real or placeholder images with consistent dimensions.
• Keep testimonial text concise—2 lines max for best layout.
• Test responsiveness on mobile using browser dev tools.
• Consider lazy loading images for performance.

That's it. With Bootstrap's grid, utilities, and optional carousel, you can create a professional, responsive testimonials section in minutes. Basically just structure, style, and test.

The above is the detailed content of How to create a responsive testimonials section in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!