Web Designer Wall

Snippets Team

Bootstrap 5 Meet Our Team Section

A centred team section with three portrait cards, each showing a name, a role and LinkedIn and email buttons.

Bootstrap 5 No jQuery Dec 2019 2.8K views 

<section class="wdw-stage">
  <div class="container" style="max-width:1000px">
    <div class="text-center mb-5">
      <span class="wdw-eyebrow">Founders & leads</span>
      <h2 class="wdw-heading display-6 mt-2 mb-2">Meet our team</h2>
      <p class="wdw-muted mx-auto mb-0" style="max-width:32rem">Three people, one shared obsession with making great products feel effortless.</p>
    </div>
    <div class="row g-4">
      <div class="col-md-4">
        <article class="wdw-card mt-card text-center p-4 h-100 d-flex flex-column">
          <div class="mt-avatar mx-auto mb-3"><img src="https://i.pravatar.cc/300?img=12" alt="John Kandy" width="132" height="132" loading="lazy"></div>
          <h3 class="h5 fw-bold mb-1">John Kandy</h3>
          <p class="text-primary fw-semibold small mb-3">CEO and founder</p>
          <p class="wdw-muted small mb-3">Started the company in a spare bedroom and still reads every customer email.</p>
          <div class="d-flex justify-content-center gap-2 mb-4"><span class="badge rounded-pill bg-primary-subtle text-primary-emphasis fw-semibold">Strategy</span><span class="badge rounded-pill bg-primary-subtle text-primary-emphasis fw-semibold">Product</span></div>
          <div class="d-flex justify-content-center gap-2 mt-auto">
            <a class="mt-social" href="#" aria-label="John Kandy on LinkedIn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg></a>
            <a class="mt-social" href="#" aria-label="Email John Kandy"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 6L2 7"/></svg></a>
          </div>
        </article>
      </div>
      <div class="col-md-4">
        <article class="wdw-card mt-card text-center p-4 h-100 d-flex flex-column">
          <div class="mt-avatar mx-auto mb-3"><img src="https://i.pravatar.cc/300?img=33" alt="Sam Ilana" width="132" height="132" loading="lazy"></div>
          <h3 class="h5 fw-bold mb-1">Sam Ilana</h3>
          <p class="text-primary fw-semibold small mb-3">Co-founder</p>
          <p class="wdw-muted small mb-3">Leads engineering and keeps the roadmap honest, one small release at a time.</p>
          <div class="d-flex justify-content-center gap-2 mb-4"><span class="badge rounded-pill bg-primary-subtle text-primary-emphasis fw-semibold">Engineering</span><span class="badge rounded-pill bg-primary-subtle text-primary-emphasis fw-semibold">Hiring</span></div>
          <div class="d-flex justify-content-center gap-2 mt-auto">
            <a class="mt-social" href="#" aria-label="Sam Ilana on LinkedIn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg></a>
            <a class="mt-social" href="#" aria-label="Email Sam Ilana"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 6L2 7"/></svg></a>
          </div>
        </article>
      </div>
      <div class="col-md-4">
        <article class="wdw-card mt-card text-center p-4 h-100 d-flex flex-column">
          <div class="mt-avatar mx-auto mb-3"><img src="https://i.pravatar.cc/300?img=47" alt="Maria Samantha" width="132" height="132" loading="lazy"></div>
          <h3 class="h5 fw-bold mb-1">Maria Samantha</h3>
          <p class="text-primary fw-semibold small mb-3">HR Manager</p>
          <p class="wdw-muted small mb-3">Builds the culture, onboarding and the habits that make people want to stay.</p>
          <div class="d-flex justify-content-center gap-2 mb-4"><span class="badge rounded-pill bg-primary-subtle text-primary-emphasis fw-semibold">People</span><span class="badge rounded-pill bg-primary-subtle text-primary-emphasis fw-semibold">Culture</span></div>
          <div class="d-flex justify-content-center gap-2 mt-auto">
            <a class="mt-social" href="#" aria-label="Maria Samantha on LinkedIn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg></a>
            <a class="mt-social" href="#" aria-label="Email Maria Samantha"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 6L2 7"/></svg></a>
          </div>
        </article>
      </div>
    </div>
    <p class="text-center wdw-muted small mt-5 mb-0">Want to join us? <a class="link-primary fw-semibold" href="#">See open roles</a></p>
  </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 Team snippets