Bootstrap 5 avatar component built with CSS. Bootstrap has no built-in avatar — these patterns show how to build them cleanly using flexbox and positioning.
Quick CSS
.avatar {
width: 40px; height: 40px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: #fff;
font-size: 0.85rem;
}
Key Patterns
| Pattern | CSS Trick |
|---|---|
| Initials avatar | display:flex + align-items:center |
| Status badge | position:absolute on wrapper |
| Avatar group | margin-left:-10px + border:2px solid #fff |
| Image avatar | img + border-radius:50% + object-fit:cover |
1. Bootstrap 5 Avatar Sizes
Avatar components in all sizes with initials fallback and image variants.
2. Bootstrap 5 Avatar with Status Badge
Avatars with online/offline/away status indicators — common in chat and team UIs.
3. Bootstrap 5 Avatar Group Stack
Overlapping avatar group — common for showing team members, contributors and likes.
4. Bootstrap 5 Avatar in User Cards
Avatars used in user profile cards, comment sections and team listings.
Frequently Asked Questions
Bootstrap 5 has no built-in avatar component. Build it with CSS: border-radius:50%, a fixed width/height, background color and display:flex align-items:center justify-content:center. Add initials as text inside.
Use a flex container. Set negative margin-left on all items except the first: margin-left:-10px. Add border:2px solid #fff to each avatar to create the overlap separation effect. More negative margin = more overlap.
Wrap the avatar in position:relative div. Add a small absolutely-positioned div in the bottom-right corner: position:absolute; bottom:2px; right:2px; width:10px; height:10px; border-radius:50%; border:2px solid #fff. Color it green for online, gray for offline, yellow for away.
Use an img tag with border-radius:50% and object-fit:cover: <img src='avatar.jpg' class='rounded-circle' width='40' height='40' style='object-fit:cover;' alt='User'>. Wrap in the same relative container for status badges.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.