Web Designer Wall

Snippets Image

Bootstrap 5 Testimonial Cards with Profile Photos

Three testimonial cards, each with a quote, a circular profile photo and the person's name and role. The middle card is highlighted on a brand panel and all cards lift slightly on hover.

Bootstrap 5 No jQuery Nov 2019 2.1K views 

<section class="wdw-stage">
  <div class="container" style="max-width:1080px">
    <div class="text-center mb-5">
      <span class="wdw-eyebrow mb-2">Testimonials</span>
      <h2 class="wdw-heading display-6 mb-0">Kind words from our customers</h2>
    </div>
    <div class="row g-4">
      <div class="col-md-4">
        <figure class="quote-card wdw-card h-100 p-4 m-0 d-flex flex-column">
          <svg class="quote-mark" width="36" height="36" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M9.5 6C6.5 7 4 9.800 4 14v4h6v-6H7c0-2 1-3.200 3.200-4L9.500 6zm10 0c-3 1-5.500 3.800-5.500 8v4h6v-6h-3c0-2 1-3.200 3.200-4L19.500 6z"/></svg>
          <blockquote class="mb-4 flex-grow-1">Which is worse, that everyone has his price, or that the price is always so low.</blockquote>
          <figcaption class="d-flex align-items-center gap-3">
            <img src="https://i.pravatar.cc/96?img=47" width="48" height="48" class="rounded-circle" alt="Emily Barrow">
            <div><strong class="d-block">Emily Barrow</strong><span class="wdw-muted small">Product Designer</span></div>
          </figcaption>
        </figure>
      </div>
      <div class="col-md-4">
        <figure class="quote-card quote-card-featured wdw-aurora rounded-4 h-100 p-4 m-0 d-flex flex-column">
          <svg class="quote-mark" width="36" height="36" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M9.5 6C6.5 7 4 9.800 4 14v4h6v-6H7c0-2 1-3.200 3.200-4L9.500 6zm10 0c-3 1-5.500 3.800-5.500 8v4h6v-6h-3c0-2 1-3.200 3.200-4L19.500 6z"/></svg>
          <blockquote class="mb-4 flex-grow-1">I'm killing time while I wait for life to shower me with meaning and happiness.</blockquote>
          <figcaption class="d-flex align-items-center gap-3">
            <img src="https://i.pravatar.cc/96?img=12" width="48" height="48" class="rounded-circle" alt="Tim Forever">
            <div><strong class="d-block">Tim Forever</strong><span class="small opacity-75">Founder, Daydream Co.</span></div>
          </figcaption>
        </figure>
      </div>
      <div class="col-md-4">
        <figure class="quote-card wdw-card h-100 p-4 m-0 d-flex flex-column">
          <svg class="quote-mark" width="36" height="36" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M9.5 6C6.5 7 4 9.800 4 14v4h6v-6H7c0-2 1-3.200 3.200-4L9.500 6zm10 0c-3 1-5.500 3.800-5.500 8v4h6v-6h-3c0-2 1-3.200 3.200-4L19.500 6z"/></svg>
          <blockquote class="mb-4 flex-grow-1">The only skills I have the patience to learn are those that have no real application in life.</blockquote>
          <figcaption class="d-flex align-items-center gap-3">
            <img src="https://i.pravatar.cc/96?img=44" width="48" height="48" class="rounded-circle" alt="Jenny Jenkins">
            <div><strong class="d-block">Jenny Jenkins</strong><span class="wdw-muted small">Illustrator</span></div>
          </figcaption>
        </figure>
      </div>
    </div>
  </div>
</section>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Free to use in personal and commercial projects under the MIT license.

Related snippets

More image snippets