Bootstrap 5 Team Member Card
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.
Primary Class
.team-cardCommon 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 & Classes
| Variant | Description |
|---|---|
| Team Member Card Default | Standard team member card with Bootstrap's default styling. |
| Team Member Card Responsive | Responsive variant that adapts to different screen sizes. |
Code Example
<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="/assets/img/team/sarah-chen.jpg" 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="/assets/img/team/marcus-obi.jpg" 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="/assets/img/team/priya-nair.jpg" 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:[email protected]" class="btn btn-sm btn-outline-secondary" aria-label="Email Priya">Email</a>
</div>
</div>
</div>
</div>Live Examples
Basic Team Member Card
Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓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.