<div class="container py-5 my-5">

<section class="p-md-4 mx-md-5 text-center text-lg-left grey z-depth-1"

  style="background-image: url(https://mdbootstrap.com/img/Photos/Others/gradient1.jpg);">

  <div class="text-center p-5">

    <h2 class="font-weight-bold white-text mx-auto mb-4 pb-2">Testimonials</h2>

    <h4 class="font-weight-bold white-text mx-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

  </div>

  <div class="row mb-5">

    <div class="col-lg-4 mb-lg-0 mb-4 d-flex align-items-stretch">

      <div class="card">

        <div class="card-body m-1">

          <div class="row mb-4">

            <div class="col-lg-4 d-flex mb-2 align-items-center">

              <div class="avatar w-100 white d-flex justify-content-center align-items-center">

                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%2810%29.jpg" class="img-fluid  z-depth-1" alt="woman avatar">

              </div>

            </div>

            <div class="col-lg-8 text-muted d-flex flex-column justify-content-end pt-2">

              <p class="mb-1"><strong>Anna Smith</strong></p>

              <p class="mb-1"><i>Product Manager</i></p>

            </div>

          </div>

          <hr/>

          <div class="row">

            <blockquote class="blockquote m-2">

            <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>

            </blockquote>

          </div>

        </div>

      </div>

    </div>

    <div class="col-lg-4 mb-lg-0 mb-4 d-flex align-items-stretch">

      <div class="card">

        <div class="card-body m-1">

          <div class="row mb-4">

            <div class="col-lg-4 d-flex mb-2 align-items-center">

              <div class="avatar w-100 white d-flex justify-content-center align-items-center">

                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).jpg" class="img-fluid z-depth-1" alt="woman avatar">

              </div>

            </div>

            <div class="col-lg-8 text-muted d-flex flex-column justify-content-end pt-2">

              <p class="mb-1"><strong>Lara Croft</strong></p>

              <p class="mb-1"><i>Frontend Developer</i></p>

            </div>

          </div>

          <hr/>

          <div class="row">

            <blockquote class="blockquote m-2">

            <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

            </blockquote>

          </div>

        </div>

      </div>

    </div>

    <div class="col-lg-4 mb-0 d-flex align-items-stretch">

      <div class="card">

        <div class="card-body m-1">

          <div class="row mb-4">

            <div class="col-lg-4 d-flex mb-2 align-items-center">

              <div class="avatar w-100 white d-flex justify-content-center align-items-center">

                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" class="img-fluid z-depth-1" alt="woman avatar">

              </div>

            </div>

            <div class="col-lg-8 text-muted d-flex flex-column justify-content-end pt-2">

              <p class="mb-1"><strong>Tom Johnson</strong></p>

              <p class="mb-1"><i>Designer</i></p>

            </div>

          </div>

          <hr/>

          <div class="row">

            <blockquote class="blockquote m-2">

            <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>

            </blockquote>

          </div>

        </div>

      </div>

    </div>

  </div>

</section>

</div>