Bootstrap 5Content

Bootstrap 5 Team Member Card

Q: How do I make the team grid switch from one column on mobile to three on desktop?

Use Bootstrap 5's .row-cols-1 .row-cols-md-3 on the parent row. This renders one card per row on small screens and three per row from the md breakpoint (768px) upward. Add .g-4 for consistent gutters between cards. If you want four columns on large screens, append .row-cols-lg-4 to the same row element.

Q: How can I style the job title differently from the name without writing custom CSS?

Bootstrap's text utility classes handle this natively. Use .fw-bold or .fs-5 on the name , then .text-muted and .small (which maps to font-size: 0.875em) on the title . If your brand colour is applied via a CSS variable, override --bs-secondary-color in your root styles to automatically affect all .text-muted elements site-wide.

A Team Member Card is a Bootstrap 5 UI component that displays a person's photo, name, job title, and optionally a short bio or social media links in a structured card layout. It is typically used in 'Meet the Team', 'About Us', or 'Leadership' sections to humanise a brand and build trust with visitors. The component combines Bootstrap's card, image, and utility classes to create a consistent, responsive grid of people.

Bootstrap class

No dedicated Bootstrap class

Common use cases

A SaaS startup's About page displaying the founding team with LinkedIn and Twitter links so investors can verify credentials
A law firm's website listing partners with headshots, specialisations, and direct contact links to reduce friction for potential clients
A digital agency's case study page showing which specific team members worked on a client project to add credibility
A conference or event site introducing speakers with their photo, talk title, and organisation before ticket buyers commit

Variants and classes

Variant	Description and classes	Classes
Centred photo card	Round photo, name and role centred in a card.`card text-center + rounded-circle`	`card text-center + rounded-circle`
Card with social links	Buttons for LinkedIn, GitHub or email in a borderless footer.`card-footer bg-transparent border-0 + btn btn-sm`	`card-footer bg-transparent border-0 + btn btn-sm`
Horizontal card	Photo on the left, bio on the right.`card + row g-0 + col-4 / col-8`	`card + row g-0 + col-4 / col-8`
Team grid	Responsive grid of equal-height cards.`row row-cols-1 row-cols-md-3 g-4 + card h-100`	`row row-cols-1 row-cols-md-3 g-4 + card h-100`

Code example

HTML

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card text-center h-100 border-0 shadow-sm">
      <img src="https://i.pravatar.cc/192?u=sarah-chen" class="card-img-top rounded-circle mx-auto mt-4" style="width: 96px; height: 96px; object-fit: cover;" alt="Sarah Chen">
      <div class="card-body">
        <h5 class="card-title mb-1">Sarah Chen</h5>
        <p class="text-muted small mb-2">Head of Product Design</p>
        <p class="card-text small">Sarah leads the design system and has shipped over 40 product features at scale since joining in 2021.</p>
      </div>
      <div class="card-footer bg-transparent border-0 pb-3">
        <a href="https://linkedin.com/in/sarahchen" class="btn btn-sm btn-outline-primary me-1" aria-label="Sarah on LinkedIn">LinkedIn</a>
        <a href="https://twitter.com/sarahchen" class="btn btn-sm btn-outline-secondary" aria-label="Sarah on Twitter">Twitter</a>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card text-center h-100 border-0 shadow-sm">
      <img src="https://i.pravatar.cc/192?u=marcus-obi" class="card-img-top rounded-circle mx-auto mt-4" style="width: 96px; height: 96px; object-fit: cover;" alt="Marcus Obi">
      <div class="card-body">
        <h5 class="card-title mb-1">Marcus Obi</h5>
        <p class="text-muted small mb-2">Lead Backend Engineer</p>
        <p class="card-text small">Marcus architects the API infrastructure and has reduced average response times by 60% over the last year.</p>
      </div>
      <div class="card-footer bg-transparent border-0 pb-3">
        <a href="https://linkedin.com/in/marcusobi" class="btn btn-sm btn-outline-primary me-1" aria-label="Marcus on LinkedIn">LinkedIn</a>
        <a href="https://github.com/marcusobi" class="btn btn-sm btn-outline-secondary" aria-label="Marcus on GitHub">GitHub</a>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card text-center h-100 border-0 shadow-sm">
      <img src="https://i.pravatar.cc/192?u=priya-nair" class="card-img-top rounded-circle mx-auto mt-4" style="width: 96px; height: 96px; object-fit: cover;" alt="Priya Nair">
      <div class="card-body">
        <h5 class="card-title mb-1">Priya Nair</h5>
        <p class="text-muted small mb-2">Customer Success Manager</p>
        <p class="card-text small">Priya manages onboarding for enterprise accounts and maintains a 98% retention rate across her portfolio.</p>
      </div>
      <div class="card-footer bg-transparent border-0 pb-3">
        <a href="https://linkedin.com/in/priyanair" class="btn btn-sm btn-outline-primary me-1" aria-label="Priya on LinkedIn">LinkedIn</a>
        <a href="mailto:priya@company.com" class="btn btn-sm btn-outline-secondary" aria-label="Email Priya">Email</a>
      </div>
    </div>
  </div>
</div>

Live examples

Basic Team Member Card

Example 1

Canvas template variants

Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:

Canvas Builder generated team member card with custom colours
Team Member Card with interactive states
Responsive team member card for all screen sizes

Best practices

Use object-fit: cover on portrait images

Team photos are rarely the same aspect ratio. Apply style="object-fit: cover;" with a fixed width and height on the <img> tag so every headshot crops consistently, a misaligned row of portraits immediately signals poor craft to visitors.

Add h-100 to cards in a row so heights equalise

When bio lengths differ, cards in the same row will be different heights unless you add the h-100 class to each .card. Combined with Bootstrap's .row-cols-* grid, this keeps the visual grid tight without any custom CSS.

Keep social links in card-footer, not card-body

Placing social links in .card-footer with bg-transparent border-0 pushes them to the bottom of every card, so the action row stays visually aligned across the grid regardless of bio length differences.

Include aria-label on icon-only social buttons

If you replace button text with SVG icons, always add aria-label="Sarah on LinkedIn" to each link. Screen readers will otherwise announce the link as unlabelled, which fails WCAG 2.1 success criterion 2.4.6.

FAQ

How do I make the team grid switch from one column on mobile to three on desktop?

Use Bootstrap 5's .row-cols-1 .row-cols-md-3 on the parent row. This renders one card per row on small screens and three per row from the md breakpoint (768px) upward. Add .g-4 for consistent gutters between cards. If you want four columns on large screens, append .row-cols-lg-4 to the same row element.

How can I style the job title differently from the name without writing custom CSS?

Bootstrap's text utility classes handle this natively. Use .fw-bold or .fs-5 on the name <h5>, then .text-muted and .small (which maps to font-size: 0.875em) on the title <p>. If your brand colour is applied via a CSS variable, override --bs-secondary-color in your root styles to automatically affect all .text-muted elements site-wide.

How does Canvas Builder generate Team Member Card sections?

When you describe a team section to Canvas Builder, it generates a fully structured Bootstrap 5 card grid with realistic placeholder names, roles, and bios, applying your brand's primary colour to button outlines and link hover states via Bootstrap's CSS custom properties. The output is production-ready HTML (responsive across all breakpoints, accessible, and compatible with the Canvas template) so you can drop in real photos and copy without touching the layout code.