Testimonials / Reviews

Bootstrap Testimonials / Reviews - examples & tutorial

Responsive Testimonials / Reviews built with Bootstrap 5. Testimonials slider & carousel, testimonials with star ratings, with avatars, with background images, with cards, with gradients & many more examples.


Basic example

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://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg"
                    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://mdbootstrap.com/img/Photos/Avatars/img%20(2).jpg"
                    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://mdbootstrap.com/img/Photos/Avatars/img%20(9).jpg"
                    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 with 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.jpg);
            "
          >
            <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://mdbootstrap.com/img/Photos/Avatars/img%20%2810%29.jpg"
                          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


          <section>
            <div class="row text-center">
              <div class="col-md-12">
                <!-- Carousel wrapper -->
                <div
                  id="carouselBasicExample"
                  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://mdbootstrap.com/img/Photos/Avatars/img%20(2).jpg"
                          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://mdbootstrap.com/img/Photos/Avatars/img%20(31).jpg"
                          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://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg"
                          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
                    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
                    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>
        

Testimonials with colorful 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">
              <div class="col-md-4 mb-5 mb-md-0">
                <div class="card testimonial-card">
                  <div class="card-up" style="background-color: #9d789b;"></div>
                  <div class="avatar mx-auto bg-white">
                    <img
                      src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg"
                      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">
                <div class="card testimonial-card">
                  <div class="card-up" style="background-color: #7a81a8;"></div>
                  <div class="avatar mx-auto bg-white">
                    <img
                      src="https://mdbootstrap.com/img/Photos/Avatars/img%20(2).jpg"
                      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">
                <div class="card testimonial-card">
                  <div class="card-up" style="background-color: #6d5b98;"></div>
                  <div class="avatar mx-auto bg-white">
                    <img
                      src="https://mdbootstrap.com/img/Photos/Avatars/img%20(9).jpg"
                      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


          <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"
                        class="carousel slide carousel-dark"
                        data-mdb-ride="carousel"
                      >
                        <!-- Indicators -->
                        <div class="carousel-indicators mb-0">
                          <button
                            data-mdb-target="#carouselDarkVariant"
                            data-mdb-slide-to="0"
                            class="active"
                            aria-current="true"
                            aria-label="Slide 1"
                          ></button>
                          <button
                            data-mdb-target="#carouselDarkVariant"
                            data-mdb-slide-to="1"
                            aria-label="Slide 1"
                          ></button>
                          <button
                            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://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg"
                                      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://mdbootstrap.com/img/Photos/Avatars/img%20(2).jpg"
                                      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://mdbootstrap.com/img/Photos/Avatars/img%20(9).jpg"
                                      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
                          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
                          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 [data-mdb-target] { border-radius: 50%; width: 10px; height: 10px; }
        

Two columns testimonials

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://mdbootstrap.com/img/Photos/Avatars/img%20(22).jpg"
                    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://mdbootstrap.com/img/Photos/Avatars/img%20(19).jpg"
                    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

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://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg"
                          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://mdbootstrap.com/img/Photos/Avatars/img%20(15).jpg"
                          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://mdbootstrap.com/img/Photos/Avatars/img%20(17).jpg"
                          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; }