Bootstrap 5 Avatar Group
An avatar group is a horizontal stack of circular user profile images that overlap one another, often with an overflow counter badge when the total count exceeds a display limit. It is built entirely from Bootstrap 5.3 utilities — specifically d-flex, rounded-circle, border, and optionally Tooltip — rather than any official Bootstrap component. Use it wherever you need to show social proof, team membership, post reactions, or task assignees in a compact, visually recognisable format.
Primary Class
d-flex align-items-centerCommon Use Cases
- →Display the three most recent commenters on a blog post with an overflow count such as '+12 others' to indicate broader engagement without cluttering the layout.
- →Show all members assigned to a Kanban task card so that team members can immediately see who is responsible without opening the full task detail view.
- →Render a list of event attendees on a conference registration page, stacking up to five avatars with a final badge reading the remaining attendee count.
- →Indicate which colleagues have already reacted to a Slack-style internal announcement, placing the avatar group inline beside a reaction emoji counter.
Variants & Classes
| Variant | Description |
|---|---|
| Small Overlapping Stack | Compact 32 px avatars overlapping by roughly half their width, suitable for table rows, card footers, and inline contexts where vertical space is tight. |
| Medium Overlapping Stack with Tooltips | 48 px avatars each wrapped in a Bootstrap Tooltip showing the user's full name on hover, appropriate for project management dashboards. |
| Large Stack with Overflow Badge | 56 px avatars limited to four visible members, followed by a circular badge rendered with bg-secondary and rounded-circle showing the remaining count, suited to team profile sections. |
| Bordered Light Stack | Any size avatars given a thick white border using border border-3 border-white so the overlap boundary is visually clean against coloured or image backgrounds. |
Code Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 5 Avatar Group</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<style>
.avatar-group {
display: flex;
align-items: center;
}
.avatar-group .avatar {
width: 48px;
height: 48px;
border-radius: 50%;
border: 3px solid #fff;
margin-left: -12px;
object-fit: cover;
position: relative;
transition: transform 0.15s ease, z-index 0s;
}
.avatar-group .avatar:first-child {
margin-left: 0;
}
.avatar-group .avatar:hover {
transform: translateY(-4px);
z-index: 10;
}
.avatar-group .avatar-overflow {
width: 48px;
height: 48px;
border-radius: 50%;
border: 3px solid #fff;
margin-left: -12px;
background-color: #6c757d;
color: #fff;
font-size: 0.8rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
</style>
</head>
<body class="p-4 bg-light">
<p class="text-muted mb-1 small fw-semibold text-uppercase">Assigned to</p>
<div class="avatar-group" role="group" aria-label="Assigned team members">
<img
src="https://i.pravatar.cc/150?img=1"
alt="Alice Mensah"
class="avatar"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Alice Mensah"
>
<img
src="https://i.pravatar.cc/150?img=2"
alt="Ben Okafor"
class="avatar"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Ben Okafor"
>
<img
src="https://i.pravatar.cc/150?img=3"
alt="Clara Singh"
class="avatar"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Clara Singh"
>
<img
src="https://i.pravatar.cc/150?img=4"
alt="David Leroy"
class="avatar"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="David Leroy"
>
<div
class="avatar-overflow"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="9 more members"
aria-label="9 more members"
>+9</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
const tooltipEls = document.querySelectorAll('[data-bs-toggle="tooltip"]');
tooltipEls.forEach(el => new bootstrap.Tooltip(el));
</script>
</body>
</html>Live Examples
Small Inline Avatar Group (Table Row)
32 px avatars overlapping inside a table cell, useful for task or issue lists where vertical space is at a premium.
Avatar Group with Name Labels
Medium avatars stacked with a short text label beneath the group, appropriate for a project team section on a landing page.
Initials Fallback Avatar Group
When no profile photo is available, render circular divs with initials using bg-primary, bg-success, and bg-warning utilities — no images required.
Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓Small overlapping avatar stack for card footers and table rows
- ✓Medium tooltipped avatar group for project management dashboards
- ✓Large avatar group with initials fallback for users without photos
- ✓Overflow badge avatar group auto-generated from a team member list prompt
- ✓Inline avatar group with member count label placed beside a social reaction counter
Best Practices
Control overlap with negative margin-left
Bootstrap 5 has no built-in overlap utility, so set a consistent negative margin-left on every avatar except the first using an inline style or a small custom CSS rule. A value of roughly one quarter to one third of the avatar width produces a natural overlap without obscuring faces. Keep the value consistent across all sizes you define.
Use z-index and position: relative on hover
Because overlapping elements stack in DOM order by default, the rightmost avatar naturally appears on top. Add position: relative and a z-index: 10 on :hover so the hovered avatar lifts above its neighbours. Bootstrap's position-relative utility and a small custom transition are all you need — no JavaScript required.
Always provide meaningful alt text and ARIA labels
Each img element should carry a descriptive alt attribute containing the person's name, since screen readers announce these in sequence. Wrap the whole group in a div with role="group" and aria-label="Team members" or a similarly descriptive phrase so assistive technology understands the collective meaning, not just individual images.
Initialise Tooltips explicitly in JavaScript
Bootstrap 5 tooltips are opt-in and will not activate from data attributes alone without calling new bootstrap.Tooltip(el) per element. Query all [data-bs-toggle="tooltip"] elements after the DOM is loaded and initialise them in a loop. Failing to do this is the most common reason tooltips appear broken when the markup is otherwise correct.