Testimonials Bootstrap 4 Snippet

by mylastof

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container my-5">
  <div class="row">
    <div class="col-12 col-md-6 mb-3">
      <div class="card">
        <div class="testi-main p-3">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

          <div class="testi-info d-flex align-items-center">
            <a target="_top" href="https://bssnippets.blogspot.com"><img src="https://via.placeholder.com/70" class="rounded-circle" alt=""/></a>
            <div class="ml-3">
              <h6>Mary Scott</h6>
              <h7>Founder & CEO</h7>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-6 mb-3">
      <div class="card">
        <div class="testi-main p-3">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

          <div class="testi-info d-flex align-items-center">
            <a target="_top" href="https://bssnippets.blogspot.com"><img src="https://via.placeholder.com/70" class="rounded-circle" alt=""/></a>
            <div class="ml-3">
              <h6>Mary Scott</h6>
              <h7>Founder & CEO</h7>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.card .testi-main p:before {
  content: '\201C';
  font-size: 10em;
  display: block;
  line-height: .5em;
  margin: 10px 0 -25px 0;
  padding: 0;
  color: #eee
}