Bootstrap 5 Testimonials / Reviews Snippet

July 15, 2024

Creating a visually appealing and highly functional website is paramount in the ever-evolving landscape of web development. One key aspect that can elevate a website’s credibility and user engagement is the inclusion of testimonials and reviews. Bootstrap 5, the latest iteration of the popular front-end framework, offers a plethora of snippets and components to enhance your website. Among these, the free Bootstrap 5 testimonials/reviews snippet is a powerful tool for showcasing customer feedback and building trust with your audience.

Bootstrap 5 Component Update

We have updated this Bootstrap component to Bootstrap 5.3.3 and BSB Framework 2.0.4. We have rechecked this Bootstrap snippet on May 3, 2024.

Pro WordPress Themes

Browse Now

Free WordPress Themes

Download Now

Bootstrap 5 Testimonial Snippet Example

This Bootstrap testimonials snippet has a trendy and responsive layout. This snippet displays client reviews in a grid design.

Preview Get Code

More Snippets Join BS Brain

Bootstrap 5 Templates

Bootstrap One Page Templates, Bootstrap 5 Templates, Free Bootstrap Templates

This snippet also features an appealing heading and a prominent Call to Action (CTA) button. Every testimonial card features an image, name, designation, and client’s quote.

Characteristics of Bootstrap 5 Testimonials / Reviews Snippet

Bootstrap 5 testimonials/reviews snippets are designed to be easy to implement and customize, making them an ideal choice for novice and experienced web developers. Here are some key features:

Responsive Design: Built with Bootstrap 5, these snippets are fully responsive, ensuring your testimonials look great on any device, from desktops to mobile phones.
Layout Variety: The snippets offer a range of layout options, allowing you to select a design that perfectly complements your website’s aesthetic. Whether it’s a carousel, grid, or card layout, there’s a snippet that suits your needs.
User-Friendly: The snippets are easy to integrate into your existing Bootstrap 5 project. Copy the HTML, CSS, and JavaScript code, and you’re ready to go.
Accessibility: Bootstrap 5 prioritizes accessibility, ensuring that your testimonials and reviews are usable by all visitors, including those with disabilities.
Modern and Professional Design: The snippets feature a sleek and modern design, incorporating the latest web design trends to keep your site looking fresh and professional, enhancing its appeal to visitors.

Features

Bootstrap 5
BSB Framework
Review Quotation
Versatile Design
Customer Reviews
HTML5 & CSS3
W3C Valid
Clean Snippet
Commented Code
Responsive Layout
Easy to Use
SEO Optimized
Cross Browser Compatible

Bootstrap 5 Components

Bootstrap Login Forms, Bootstrap 5 Snippets, Bootstrap Cards, Bootstrap Carousels, Bootstrap Heroes, Bootstrap Footers

HTML
CSS

<!-- Testimonial 2 - Bootstrap Brain Component -->
<section class="bg-light py-3 py-md-5">
  <div class="container">
    <div class="row gy-5 gy-lg-0 align-items-center">
      <div class="col-12 col-lg-4">
        <h2 class="display-5 mb-3 mb-xl-4">Our Clients</h2>
        <p class="lead mb-4 mb-xl-5">We believe in client satisfaction. Here are some testimonials by our worthy clients.</p>
        <a href="#!" class="btn bsb-btn-2xl btn-primary rounded-pill">More Testimonials</a>
      </div>
      <div class="col-12 col-lg-8">
        <div class="row justify-content-xl-end">
          <div class="col-12 col-xl-11">
            <div class="row gy-4">
              <div class="col-12 col-md-6">
                <div class="card border-0 border-bottom border-primary shadow-sm">
                  <div class="card-body p-4 p-xxl-5">
                    <figure>
                      <img class="img-fluid rounded rounded-circle mb-4 border border-5" loading="lazy" src="./assets/img/testimonial-img-1.jpg" alt="Luna Joh">
                      <figcaption>
                        <blockquote class="bsb-blockquote-icon mb-4">We were so impressed with the work they did for us. They were able to take our vision and turn it into a reality, and they did it all on time and within budget. We would highly recommend them to anyone looking for a reliable and professional partner.</blockquote>
                        <h4 class="mb-2">Luna John</h4>
                        <h5 class="fs-6 text-secondary mb-0">UX Designer</h5>
                      </figcaption>
                    </figure>
                  </div>
                </div>
              </div>
              <div class="col-12 col-md-6">
                <div class="card border-0 border-bottom border-primary shadow-sm">
                  <div class="card-body p-4 p-xxl-5">
                    <figure>
                      <img class="img-fluid rounded rounded-circle mb-4 border border-5" loading="lazy" src="./assets/img/testimonial-img-2.jpg" alt="Mark Smith">
                      <figcaption>
                        <blockquote class="bsb-blockquote-icon mb-4">We were looking for a company that could help us develop a new website that was both visually appealing and user-friendly. We are so happy with the results, and we would highly recommend them to anyone looking for a new website.</blockquote>
                        <h4 class="mb-2">Mark Smith</h4>
                        <h5 class="fs-6 text-secondary mb-0">Marketing Specialist</h5>
                      </figcaption>
                    </figure>
                  </div>
                </div>
              </div>
              <div class="col-12 col-md-6">
                <div class="card border-0 border-bottom border-primary shadow-sm">
                  <div class="card-body p-4 p-xxl-5">
                    <figure>
                      <img class="img-fluid rounded rounded-circle mb-4 border border-5" loading="lazy" src="./assets/img/testimonial-img-3.jpg" alt="Michael Wilson">
                      <figcaption>
                        <blockquote class="bsb-blockquote-icon mb-4">We were struggling to manage our finances effectively. We needed help developing a financial plan. They create a financial plan that worked for us, and they showed us how to track our spending more effectively. We are so grateful for the help.</blockquote>
                        <h4 class="mb-2">Michael Wilson</h4>
                        <h5 class="fs-6 text-secondary mb-0">SEO Expert</h5>
                      </figcaption>
                    </figure>
                  </div>
                </div>
              </div>
              <div class="col-12 col-md-6">
                <div class="card border-0 border-bottom border-primary shadow-sm">
                  <div class="card-body p-4 p-xxl-5">
                    <figure>
                      <img class="img-fluid rounded rounded-circle mb-4 border border-5" loading="lazy" src="./assets/img/testimonial-img-4.jpg" alt="Luke Reeves">
                      <figcaption>
                        <blockquote class="bsb-blockquote-icon mb-4">We were looking for a company that could help us with our branding. We needed a website and marketing materials. They were able to create a brand identity that we loved. They worked with us to develop a logo that represented our company. </blockquote>
                        <h4 class="mb-2">Luke Reeves</h4>
                        <h5 class="fs-6 text-secondary mb-0">Sales Manager</h5>
                      </figcaption>
                    </figure>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<link rel="stylesheet" href="https://unpkg.com/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bs-brain@2.0.4/components/testimonials/testimonial-2/assets/css/testimonial-2.css">