Web Designer Wall

Snippets Buttons

Bootstrap 5 Team Section with Round Profile Images

A team section of profile cards with round photos, role, a short quote and profile and message buttons.

Bootstrap 5 Bootstrap 6 No jQuery Dec 2019 5.9K views 

<section class="wdw-stage">
  <div class="container" style="max-width:1040px">
    <div class="text-center mx-auto mb-5" style="max-width:560px">
      <span class="wdw-eyebrow">Testimonials</span>
      <h1 class="display-6 wdw-heading mt-1 mb-3">Opinions matter</h1>
      <p class="wdw-muted mb-0">A homegrown, globally connected hub that prides itself on creativity and innovation. Here is what the people we work with say.</p>
    </div>
    <div class="row g-4 justify-content-center">
      <div class="col-md-6 col-lg-4">
        <article class="wdw-card tm h-100 d-flex flex-column text-center p-4 pt-5">
          <img class="tm-photo rounded-circle mx-auto" src="https://i.pravatar.cc/240?img=47" width="96" height="96" alt="Angelina Frederic">
          <h2 class="h5 wdw-heading mt-3 mb-1">Angelina Frederic</h2>
          <p class="small fw-semibold text-primary mb-3">Head of marketing, K Mart</p>
          <svg class="tm-q" width="28" height="28" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M7.2 6C4.9 7.3 3.5 9.6 3.5 12.4V18h6v-6H6.3c.1-1.6.9-2.9 2.3-3.7L7.2 6Zm9.5 0c-2.3 1.3-3.7 3.6-3.7 6.4V18h6v-6h-3.2c.1-1.6.9-2.9 2.3-3.7L16.7 6Z"/></svg>
          <p class="wdw-muted mb-3">“I expected nothing less than perfect from a team of experts. They are the best we have worked with.”</p>
          <div class="d-flex justify-content-center gap-2 mb-4 tm-soc"><a href="#" class="tm-s" aria-label="Angelina Frederic on LinkedIn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6zM2 9h4v12H2zM4 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/></svg></a><a href="#" class="tm-s" aria-label="Email Angelina Frederic"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></a></div>
          <div class="d-flex justify-content-center gap-2 mt-auto">
            <a class="btn btn-outline-primary btn-sm rounded-pill px-3" href="#">Profile</a>
            <a class="btn btn-primary btn-sm rounded-pill px-3" href="#">Message</a>
          </div>
        </article>
      </div>
      <div class="col-md-6 col-lg-4">
        <article class="wdw-card tm wdw-aurora tm-feat h-100 d-flex flex-column text-center p-4 pt-5">
          <img class="tm-photo rounded-circle mx-auto" src="https://i.pravatar.cc/240?img=33" width="96" height="96" alt="Jackson Totham">
          <h2 class="h5 wdw-heading mt-3 mb-1">Jackson Totham</h2>
          <p class="small fw-semibold mb-3 opacity-75">CEO, Redbird</p>
          <svg class="tm-q" width="28" height="28" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M7.2 6C4.9 7.3 3.5 9.6 3.5 12.4V18h6v-6H6.3c.1-1.6.9-2.9 2.3-3.7L7.2 6Zm9.5 0c-2.3 1.3-3.7 3.6-3.7 6.4V18h6v-6h-3.2c.1-1.6.9-2.9 2.3-3.7L16.7 6Z"/></svg>
          <p class="mb-3">“A group of real professionals who know exactly what they are doing. Working with them was a pleasure.”</p>
          <div class="d-flex justify-content-center gap-2 mb-4 tm-soc"><a href="#" class="tm-s" aria-label="Jackson Totham on LinkedIn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6zM2 9h4v12H2zM4 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/></svg></a><a href="#" class="tm-s" aria-label="Email Jackson Totham"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></a></div>
          <div class="d-flex justify-content-center gap-2 mt-auto">
            <a class="btn btn-outline-light btn-sm rounded-pill px-3" href="#">Profile</a>
            <a class="btn btn-light btn-sm rounded-pill px-3" href="#">Message</a>
          </div>
        </article>
      </div>
      <div class="col-md-6 col-lg-4">
        <article class="wdw-card tm h-100 d-flex flex-column text-center p-4 pt-5">
          <img class="tm-photo rounded-circle mx-auto" src="https://i.pravatar.cc/240?img=44" width="96" height="96" alt="Maria Lopez">
          <h2 class="h5 wdw-heading mt-3 mb-1">Maria Lopez</h2>
          <p class="small fw-semibold text-primary mb-3">Product lead, Finlo</p>
          <svg class="tm-q" width="28" height="28" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M7.2 6C4.9 7.3 3.5 9.6 3.5 12.4V18h6v-6H6.3c.1-1.6.9-2.9 2.3-3.7L7.2 6Zm9.5 0c-2.3 1.3-3.7 3.6-3.7 6.4V18h6v-6h-3.2c.1-1.6.9-2.9 2.3-3.7L16.7 6Z"/></svg>
          <p class="wdw-muted mb-3">“Clear communication, fast delivery and a result that exceeded what we had in mind.”</p>
          <div class="d-flex justify-content-center gap-2 mb-4 tm-soc"><a href="#" class="tm-s" aria-label="Maria Lopez on LinkedIn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6zM2 9h4v12H2zM4 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/></svg></a><a href="#" class="tm-s" aria-label="Email Maria Lopez"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></a></div>
          <div class="d-flex justify-content-center gap-2 mt-auto">
            <a class="btn btn-outline-primary btn-sm rounded-pill px-3" href="#">Profile</a>
            <a class="btn btn-primary btn-sm rounded-pill px-3" href="#">Message</a>
          </div>
        </article>
      </div>
    </div>
  </div>
</section>

Built on Bootstrap 6.0.0-alpha.1 (ES modules, no jQuery). Load Bootstrap through an import map and run the JavaScript as type="module" — the downloaded file is already set up that way. Alpha releases can still change class names.

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 buttons snippets