Testimonials / Reviews

Bootstrap Testimonials / Reviews - free examples & tutorial

Responsive Testimonials / Reviews templates built with Bootstrap 5. Testimonial page and section templates with stars, images, background images, cards & more.

Basic testomonials page

A basic example of a testimonial page. Each review contains the customers profile picture, a stylized review quotation and a star rating.

Testimonials

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.

Maria Smantha
Web Developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab hic tenetur.

Lisa Cudrow
Graphic Designer

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid commodi.

John Smith
Marketing Specialist

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.

        
            
          <section>
            <div class="row d-flex justify-content-center">
              <div class="col-md-10 col-xl-8 text-center">
                <h3 class="mb-4">Testimonials</h3>
                <p class="mb-4 pb-2 mb-md-5 pb-md-0">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet
                  numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum
                  quisquam eum porro a pariatur veniam.
                </p>
              </div>
            </div>

            <div class="row text-center">
              <div class="col-md-4 mb-5 mb-md-0">
                <div class="d-flex justify-content-center mb-4">
                  <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(1).webp"
                    class="rounded-circle shadow-1-strong" width="150" height="150" />
                </div>
                <h5 class="mb-3">Maria Smantha</h5>
                <h6 class="text-primary mb-3">Web Developer</h6>
                <p class="px-xl-3">
                  <i class="fas fa-quote-left pe-2"></i>Lorem ipsum dolor sit amet, consectetur
                  adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab hic
                  tenetur.
                </p>
                <ul class="list-unstyled d-flex justify-content-center mb-0">
                  <li>
                    <i class="fas fa-star fa-sm text-warning"></i>
                  </li>
                  <li>
                    <i class="fas fa-star fa-sm text-warning"></i>
                  </li>
                  <li>
                    <i class="fas fa-star fa-sm text-warning"></i>
                  </li>
                  <li>
                    <i class="fas fa-star fa-sm text-warning"></i>
                  </li>
                  <li>
                    <i class="fas fa-star-half-alt fa-sm text-warning"></i>
                  </li>
                </ul>
              </div>
              <div class="col-md-4 mb-5 mb-md-0">
                <div class="d-flex justify-content-center mb-4">
                  <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(2).webp"
                    class="rounded-circle shadow-1-strong" width="150" height="150" />
                </div>
                <h5 class="mb-3">Lisa Cudrow</h5>
                <h6 class="text-primary mb-3">Graphic Designer</h6>
                <p class="px-xl-3">
                  <i class="fas fa-quote-left pe-2"></i>Ut enim ad minima veniam, quis nostrum
                  exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid commodi.
                </p>
                <ul class="list-unstyled d-flex justify-content-center mb-0">
                  <li>
                    <i class="fas fa-star fa-sm text-warning"></i>
                  </li>
                  <li>
                    <i class="fas fa-star fa-sm text-warning"></i>
                  </li>
                  <li>
                    <i class="fas fa-star fa-sm text-warning"></i>
                  </li>
                  <li>
                    <i class="fas fa-star fa-sm text-warning"></i>
                  </li>
                  <li>
                    <i class="fas fa-star fa-sm text-warning"></i>
                  </li>
                </ul>
              </div>
              <div class="col-md-4 mb-0">
                <div class="d-flex justify-content-center mb-4">
                  <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(9).webp"
                    class="rounded-circle shadow-1-strong" width="150" height="150" />
                </div>
                <h5 class="mb-3">John Smith</h5>
                <h6 class="text-primary mb-3">Marketing Specialist</h6>
                <p class="px-xl-3">
                  <i class="fas fa-quote-left pe-2"></i>At vero eos et accusamus et iusto odio
                  dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.
                </p>
                <ul class="list-unstyled d-flex justify-content-center mb-0">
                  <li>
                    <i class="fas fa-star fa-sm text-warning"></i>
                  </li>
                  <li>
                    <i class="fas fa-star fa-sm text-warning"></i>
                  </li>
                  <li>
                    <i class="fas fa-star fa-sm text-warning"></i>
                  </li>
                  <li>
                    <i class="fas fa-star fa-sm text-warning"></i>
                  </li>
                  <li>
                    <i class="far fa-star fa-sm text-warning"></i>
                  </li>
                </ul>
              </div>
            </div>
          </section>
          
        
    

Testimonials section with background image

An elegant testimonial section, with a single review card overlayed on top of a background image.

woman avatar

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id quam sapiente molestiae numquam quas, voluptates omnis nulla ea odio quia similique corrupti magnam.

Anna Smith

Product manager

        
            
          <section class="p-4 p-md-5 text-center text-lg-start shadow-1-strong rounded" style="
              background-image: url(https://mdbcdn.b-cdn.net/img/Photos/Others/background2.webp);
            ">
            <div class="row d-flex justify-content-center">
              <div class="col-md-10">
                <div class="card">
                  <div class="card-body m-3">
                    <div class="row">
                      <div class="col-lg-4 d-flex justify-content-center align-items-center mb-4 mb-lg-0">
                        <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20%2810%29.webp"
                          class="rounded-circle img-fluid shadow-1" alt="woman avatar" width="200" height="200" />
                      </div>
                      <div class="col-lg-8">
                        <p class="text-muted fw-light mb-4">
                          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id quam sapiente
                          molestiae numquam quas, voluptates omnis nulla ea odio quia similique
                          corrupti magnam.
                        </p>
                        <p class="fw-bold lead mb-2"><strong>Anna Smith</strong></p>
                        <p class="fw-bold text-muted mb-0">Product manager</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
          
        
    

Small testimonials carousel

A minimalistic reviews slider section with arrow controls.

        
            
          <section>
            <div class="row text-center">
              <div class="col-md-12">
                <!-- Carousel wrapper -->
                <div id="carouselBasicExample" data-mdb-carousel-init class="carousel slide carousel-dark" data-mdb-ride="carousel">
                  <!-- Inner -->
                  <div class="carousel-inner">
                    <!-- Single item -->
                    <div class="carousel-item active">
                      <p class="lead font-italic mx-4 mx-md-5">
                        "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet
                        numquam iure provident voluptate esse quasi, voluptas nostrum quisquam!"
                      </p>
                      <div class="mt-5 mb-4">
                        <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(2).webp"
                          class="rounded-circle img-fluid shadow-1-strong" alt="smaple image" width="100"
                          height="100" />
                      </div>
                      <p class="text-muted mb-0">- Anna Morian</p>
                    </div>

                    <!-- Single item -->
                    <div class="carousel-item">
                      <p class="lead font-italic mx-4 mx-md-5">
                        "Neque cupiditate assumenda in maiores repudiandae mollitia adipisci maiores
                        repudiandae mollitia consectetur adipisicing architecto elit sed adipiscing
                        elit."
                      </p>
                      <div class="mt-5 mb-4">
                        <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(31).webp"
                          class="rounded-circle img-fluid shadow-1-strong" alt="smaple image" width="100"
                          height="100" />
                      </div>
                      <p class="text-muted mb-0">- Teresa May</p>
                    </div>

                    <!-- Single item -->
                    <div class="carousel-item">
                      <p class="lead font-italic mx-4 mx-md-5">
                        "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                        dolore eu fugiat nulla pariatur est laborum neque cupiditate assumenda in
                        maiores."
                      </p>
                      <div class="mt-5 mb-4">
                        <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(10).webp"
                          class="rounded-circle img-fluid shadow-1-strong" alt="smaple image" width="100"
                          height="100" />
                      </div>
                      <p class="text-muted mb-0">- Kate Allise</p>
                    </div>
                  </div>
                  <!-- Inner -->

                  <!-- Controls -->
                  <button data-mdb-button-init class="carousel-control-prev" type="button" data-mdb-target="#carouselBasicExample"
                    data-mdb-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                  </button>
                  <button data-mdb-button-init class="carousel-control-next" type="button" data-mdb-target="#carouselBasicExample"
                    data-mdb-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                  </button>
                </div>
                <!-- Carousel wrapper -->
              </div>
            </div>
          </section>
          
        
    

Review cards

Colorful testimonial cards with circle avatars and equal height cards.

Testimonials

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.

Maria Smantha


Lorem ipsum dolor sit amet eos adipisci, consectetur adipisicing elit.

Lisa Cudrow


Neque cupiditate assumenda in maiores repudi mollitia architecto.

John Smith


Delectus impedit saepe officiis ab aliquam repellat rem unde ducimus.

        
            
          <section>
            <div class="row d-flex justify-content-center">
              <div class="col-md-10 col-xl-8 text-center">
                <h3 class="mb-4">Testimonials</h3>
                <p class="mb-4 pb-2 mb-md-5 pb-md-0">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet
                  numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum
                  quisquam eum porro a pariatur veniam.
                </p>
              </div>
            </div>

            <div class="row text-center d-flex align-items-stretch">
              <div class="col-md-4 mb-5 mb-md-0 d-flex align-items-stretch">
                <div class="card testimonial-card">
                  <div class="card-up" style="background-color: #9d789b;"></div>
                  <div class="avatar mx-auto bg-white">
                    <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(1).webp"
                      class="rounded-circle img-fluid" />
                  </div>
                  <div class="card-body">
                    <h4 class="mb-4">Maria Smantha</h4>
                    <hr />
                    <p class="dark-grey-text mt-4">
                      <i class="fas fa-quote-left pe-2"></i>Lorem ipsum dolor sit amet eos adipisci,
                      consectetur adipisicing elit.
                    </p>
                  </div>
                </div>
              </div>
              <div class="col-md-4 mb-5 mb-md-0 d-flex align-items-stretch">
                <div class="card testimonial-card">
                  <div class="card-up" style="background-color: #7a81a8;"></div>
                  <div class="avatar mx-auto bg-white">
                    <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(2).webp"
                      class="rounded-circle img-fluid" />
                  </div>
                  <div class="card-body">
                    <h4 class="mb-4">Lisa Cudrow</h4>
                    <hr />
                    <p class="dark-grey-text mt-4">
                      <i class="fas fa-quote-left pe-2"></i>Neque cupiditate assumenda in maiores
                      repudi mollitia architecto.
                    </p>
                  </div>
                </div>
              </div>
              <div class="col-md-4 mb-0 d-flex align-items-stretch">
                <div class="card testimonial-card">
                  <div class="card-up" style="background-color: #6d5b98;"></div>
                  <div class="avatar mx-auto bg-white">
                    <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(9).webp"
                      class="rounded-circle img-fluid" />
                  </div>
                  <div class="card-body">
                    <h4 class="mb-4">John Smith</h4>
                    <hr />
                    <p class="dark-grey-text mt-4">
                      <i class="fas fa-quote-left pe-2"></i>Delectus impedit saepe officiis ab
                      aliquam repellat rem unde ducimus.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </section>
          
        
    
        
            
          .testimonial-card .card-up {
            height: 120px;
            overflow: hidden;
            border-top-left-radius: 0.25rem;
            border-top-right-radius: 0.25rem;
          }
          .testimonial-card .avatar {
            width: 110px;
            margin-top: -60px;
            overflow: hidden;
            border: 3px solid #fff;
            border-radius: 50%;
          }          
          
        
    

Testimonials with gradient background

Another template for a stunning testimonial page, this time as a testimonial slider on top of a beautiful gradient background.

        
            
          <section class="gradient-custom">
            <div class="container my-5 py-5">
              <div class="row d-flex justify-content-center">
                <div class="col-md-12">
                  <div class="text-center mb-4 pb-2">
                    <i class="fas fa-quote-left fa-3x text-white"></i>
                  </div>

                  <div class="card">
                    <div class="card-body px-4 py-5">
                      <!-- Carousel wrapper -->
                      <div id="carouselDarkVariant" data-mdb-carousel-init class="carousel slide carousel-dark" data-mdb-ride="carousel">
                        <!-- Indicators -->
                        <div class="carousel-indicators mb-0">
                          <button data-mdb-button-init data-mdb-target="#carouselDarkVariant" data-mdb-slide-to="0" class="active"
                            aria-current="true" aria-label="Slide 1"></button>
                          <button data-mdb-button-init data-mdb-target="#carouselDarkVariant" data-mdb-slide-to="1"
                            aria-label="Slide 1"></button>
                          <button data-mdb-button-init data-mdb-target="#carouselDarkVariant" data-mdb-slide-to="2"
                            aria-label="Slide 1"></button>
                        </div>

                        <!-- Inner -->
                        <div class="carousel-inner pb-5">
                          <!-- Single item -->
                          <div class="carousel-item active">
                            <div class="row d-flex justify-content-center">
                              <div class="col-lg-10 col-xl-8">
                                <div class="row">
                                  <div class="col-lg-4 d-flex justify-content-center">
                                    <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(1).webp"
                                      class="rounded-circle shadow-1 mb-4 mb-lg-0" alt="woman avatar" width="150"
                                      height="150" />
                                  </div>
                                  <div
                                    class="col-9 col-md-9 col-lg-7 col-xl-8 text-center text-lg-start mx-auto mx-lg-0">
                                    <h4 class="mb-4">Maria Smantha - Web Developer</h4>
                                    <p class="mb-0 pb-3">
                                      Lorem ipsum dolor sit amet, consectetur adipisicing elit. A
                                      aliquam amet animi blanditiis consequatur debitis dicta
                                      distinctio, enim error eum iste libero modi nam natus
                                      perferendis possimus quasi sint sit tempora voluptatem. Est,
                                      exercitationem id ipsa ipsum laboriosam perferendis.
                                    </p>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>

                          <!-- Single item -->
                          <div class="carousel-item">
                            <div class="row d-flex justify-content-center">
                              <div class="col-lg-10 col-xl-8">
                                <div class="row">
                                  <div class="col-lg-4 d-flex justify-content-center">
                                    <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(2).webp"
                                      class="rounded-circle shadow-1 mb-4 mb-lg-0" alt="woman avatar" width="150"
                                      height="150" />
                                  </div>
                                  <div
                                    class="col-9 col-md-9 col-lg-7 col-xl-8 text-center text-lg-start mx-auto mx-lg-0">
                                    <h4 class="mb-4">Lisa Cudrow - Graphic Designer</h4>
                                    <p class="mb-0 pb-3">
                                      Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                                      accusantium doloremque laudantium, totam rem aperiam, eaque
                                      ipsa quae ab illo inventore veritatis et quasi architecto
                                      beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
                                      quia voluptas sit aspernatur.
                                    </p>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>

                          <!-- Single item -->
                          <div class="carousel-item">
                            <div class="row d-flex justify-content-center">
                              <div class="col-lg-10 col-xl-8">
                                <div class="row">
                                  <div class="col-lg-4 d-flex justify-content-center">
                                    <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(9).webp"
                                      class="rounded-circle shadow-1 mb-4 mb-lg-0" alt="woman avatar" width="150"
                                      height="150" />
                                  </div>
                                  <div
                                    class="col-9 col-md-9 col-lg-7 col-xl-8 text-center text-lg-start mx-auto mx-lg-0">
                                    <h4 class="mb-4">John Smith - Marketing Specialist</h4>
                                    <p class="mb-0 pb-3">
                                      At vero eos et accusamus et iusto odio dignissimos qui
                                      blanditiis praesentium voluptatum deleniti atque corrupti quos
                                      dolores et quas molestias excepturi sint occaecati cupiditate
                                      non provident, similique sunt in culpa qui officia mollitia
                                      animi id laborum et dolorum fuga.
                                    </p>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <!-- Inner -->

                        <!-- Controls -->
                        <button data-mdb-button-init class="carousel-control-prev" type="button" data-mdb-target="#carouselDarkVariant"
                          data-mdb-slide="prev">
                          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                          <span class="visually-hidden">Previous</span>
                        </button>
                        <button data-mdb-button-init class="carousel-control-next" type="button" data-mdb-target="#carouselDarkVariant"
                          data-mdb-slide="next">
                          <span class="carousel-control-next-icon" aria-hidden="true"></span>
                          <span class="visually-hidden">Next</span>
                        </button>
                      </div>
                      <!-- Carousel wrapper -->
                    </div>
                  </div>

                  <div class="text-center mt-4 pt-2">
                    <i class="fas fa-quote-right fa-3x text-white"></i>
                  </div>
                </div>
              </div>
            </div>
          </section>
          
        
    
        
            
          .gradient-custom {
            background: radial-gradient(50% 123.47% at 50% 50%, #00ff94 0%, #720059 100%),
              linear-gradient(121.28deg, #669600 0%, #ff0000 100%),
              linear-gradient(360deg, #0029ff 0%, #8fff00 100%),
              radial-gradient(100% 164.72% at 100% 100%, #6100ff 0%, #00ff57 100%),
              radial-gradient(100% 148.07% at 0% 0%, #fff500 0%, #51d500 100%);
            background-blend-mode: screen, color-dodge, overlay, difference, normal;
          }
          .carousel-indicators {
            border-radius: 50%;
            width: 10px;
            height: 10px;
          }          
          
        
    

Two columns testimonials

Reviews displayed in two columns on medium size viewports, with the use of the grid.

Testimonials

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.

"Lorem ipsum dolor sit amet eos adipisci, consectetur adipisicing elit sed ut perspiciatis unde omnis."

- Anna Morian

"Neque cupiditate assumenda in maiores repudiandae mollitia architecto elit sed adipiscing elit."

- Teresa May

        
            
          <section>
            <div class="row d-flex justify-content-center">
              <div class="col-md-10 col-xl-8 text-center">
                <h3 class="mb-4">Testimonials</h3>
                <p class="mb-4 pb-2 mb-md-5 pb-md-0">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet
                  numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum
                  quisquam eum porro a pariatur veniam.
                </p>
              </div>
            </div>

            <div class="row text-center">
              <div class="col-md-6 mb-4 mb-md-0">
                <div class="d-flex justify-content-center mb-4">
                  <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(22).webp"
                    class="rounded-circle shadow-1-strong" width="100" height="100" />
                </div>
                <p class="lead my-3 text-muted">
                  "Lorem ipsum dolor sit amet eos adipisci, consectetur adipisicing elit sed ut
                  perspiciatis unde omnis."
                </p>
                <p class="font-italic font-weight-normal mb-0">- Anna Morian</p>
              </div>
              <div class="col-md-6 mb-0">
                <div class="d-flex justify-content-center mb-4">
                  <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(19).webp"
                    class="rounded-circle shadow-1-strong" width="100" height="100" />
                </div>
                <p class="lead my-3 text-muted">
                  "Neque cupiditate assumenda in maiores repudiandae mollitia architecto elit sed
                  adipiscing elit."
                </p>
                <p class="font-italic font-weight-normal mb-0">- Teresa May</p>
              </div>
            </div>
          </section>
          
        
    

Three columns testimonials

Review cards displayed in three columns on medium size viewports, with the use of the grid.

Testimonials

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.

Teresa May
Founder at ET Company

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab hic tenetur.

Maggie McLoan
Photographer at Studio LA

Autem, totam debitis suscipit saepe sapiente magnam officiis quaerat necessitatibus odio assumenda perferendis labore laboriosam.

Alexa Horwitz
Front-end Developer in NY

Cras sit amet nibh libero, in gravida nulla metus scelerisque ante sollicitudin commodo cras purus odio, vestibulum in tempus viverra turpis.

        
            
          <section style="color: #000; background-color: #f3f2f2;">
            <div class="container py-5">
              <div class="row d-flex justify-content-center">
                <div class="col-md-10 col-xl-8 text-center">
                  <h3 class="fw-bold mb-4">Testimonials</h3>
                  <p class="mb-4 pb-2 mb-md-5 pb-md-0">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet
                    numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum
                    quisquam eum porro a pariatur veniam.
                  </p>
                </div>
              </div>

              <div class="row text-center">
                <div class="col-md-4 mb-4 mb-md-0">
                  <div class="card">
                    <div class="card-body py-4 mt-2">
                      <div class="d-flex justify-content-center mb-4">
                        <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(10).webp"
                          class="rounded-circle shadow-1-strong" width="100" height="100" />
                      </div>
                      <h5 class="font-weight-bold">Teresa May</h5>
                      <h6 class="font-weight-bold my-3">Founder at ET Company</h6>
                      <ul class="list-unstyled d-flex justify-content-center">
                        <li>
                          <i class="fas fa-star fa-sm text-info"></i>
                        </li>
                        <li>
                          <i class="fas fa-star fa-sm text-info"></i>
                        </li>
                        <li>
                          <i class="fas fa-star fa-sm text-info"></i>
                        </li>
                        <li>
                          <i class="fas fa-star fa-sm text-info"></i>
                        </li>
                        <li>
                          <i class="fas fa-star-half-alt fa-sm text-info"></i>
                        </li>
                      </ul>
                      <p class="mb-2">
                        <i class="fas fa-quote-left pe-2"></i>Lorem ipsum dolor sit amet,
                        consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat
                        ad velit ab hic tenetur.
                      </p>
                    </div>
                  </div>
                </div>
                <div class="col-md-4 mb-4 mb-md-0">
                  <div class="card">
                    <div class="card-body py-4 mt-2">
                      <div class="d-flex justify-content-center mb-4">
                        <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(15).webp"
                          class="rounded-circle shadow-1-strong" width="100" height="100" />
                      </div>
                      <h5 class="font-weight-bold">Maggie McLoan</h5>
                      <h6 class="font-weight-bold my-3">Photographer at Studio LA</h6>
                      <ul class="list-unstyled d-flex justify-content-center">
                        <li>
                          <i class="fas fa-star fa-sm text-info"></i>
                        </li>
                        <li>
                          <i class="fas fa-star fa-sm text-info"></i>
                        </li>
                        <li>
                          <i class="fas fa-star fa-sm text-info"></i>
                        </li>
                        <li>
                          <i class="fas fa-star fa-sm text-info"></i>
                        </li>
                        <li>
                          <i class="fas fa-star fa-sm text-info"></i>
                        </li>
                      </ul>
                      <p class="mb-2">
                        <i class="fas fa-quote-left pe-2"></i>Autem, totam debitis suscipit saepe
                        sapiente magnam officiis quaerat necessitatibus odio assumenda perferendis
                        labore laboriosam.
                      </p>
                    </div>
                  </div>
                </div>
                <div class="col-md-4 mb-0">
                  <div class="card">
                    <div class="card-body py-4 mt-2">
                      <div class="d-flex justify-content-center mb-4">
                        <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(17).webp"
                          class="rounded-circle shadow-1-strong" width="100" height="100" />
                      </div>
                      <h5 class="font-weight-bold">Alexa Horwitz</h5>
                      <h6 class="font-weight-bold my-3">Front-end Developer in NY</h6>
                      <ul class="list-unstyled d-flex justify-content-center">
                        <li>
                          <i class="fas fa-star fa-sm text-info"></i>
                        </li>
                        <li>
                          <i class="fas fa-star fa-sm text-info"></i>
                        </li>
                        <li>
                          <i class="fas fa-star fa-sm text-info"></i>
                        </li>
                        <li>
                          <i class="fas fa-star fa-sm text-info"></i>
                        </li>
                        <li>
                          <i class="far fa-star fa-sm text-info"></i>
                        </li>
                      </ul>
                      <p class="mb-2">
                        <i class="fas fa-quote-left pe-2"></i>Cras sit amet nibh libero, in gravida
                        nulla metus scelerisque ante sollicitudin commodo cras purus odio,
                        vestibulum in tempus viverra turpis.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
          
        
    
        
            
          .card { 
            border-radius: .7rem; 
          }