Bootstrap 5 Profile Card
A profile card is a self-contained UI block that presents a person's avatar, name, role, and optional contact or social actions in a compact format. It is a custom pattern composed from Bootstrap 5's card component (.card, .card-body), flexbox utilities (d-flex, flex-column, align-items-center), spacing helpers (p-*, gap-*), and typography utilities. Use it on team pages, user directories, dashboard sidebars, or anywhere a person's identity needs to be shown at a glance.
Primary Class
.card .d-flex .flex-column .align-items-centerCommon Use Cases
- →A SaaS product displays a grid of profile cards on its 'Meet the Team' page, each showing a headshot, name, job title, and a LinkedIn icon link.
- →An internal HR portal renders a profile card in the sidebar of each employee record, summarising the person's department, location, and direct manager.
- →A freelance marketplace lists contractor profiles as cards in a searchable grid, with an avatar, star rating, hourly rate, and a 'Contact' button.
- →A conference website shows speaker profile cards with a photo, bio excerpt, and social handles, arranged in a responsive three-column Bootstrap grid.
Variants & Classes
| Variant | Description |
|---|---|
| Vertical Centred | Avatar centred at the top, name and role below, actions at the bottom. The default portrait-style layout for team and speaker pages. |
| Horizontal Compact | Avatar on the left, name and meta text stacked on the right. Suitable for lists, sidebars, or comment threads where vertical space is limited. |
| With Cover Banner | A coloured or image-based banner spans the card top, with the avatar overlapping it using negative margin. Common on social-style profile pages. |
| Dark Theme | Uses bg-dark text-white on the card with muted secondary text, suitable for dark dashboards or night-mode interfaces. |
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 Profile Card</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<style>
.profile-card-cover {
height: 80px;
background: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%);
}
.profile-card-avatar {
width: 88px;
height: 88px;
object-fit: cover;
margin-top: -44px;
border: 3px solid #fff;
}
.social-icon {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body class="bg-light p-5">
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-4 justify-content-center">
<!-- Variant 1: Vertical Centred -->
<div class="col">
<div class="card text-center p-4 h-100 shadow-sm">
<div class="d-flex justify-content-center mb-3">
<img src="https://i.pravatar.cc/88?img=1"
class="rounded-circle border border-3 border-primary"
width="88" height="88" alt="Avatar of Sarah Okonkwo">
</div>
<h5 class="card-title mb-1">Sarah Okonkwo</h5>
<p class="text-muted small mb-3">Lead Product Designer</p>
<p class="card-text text-muted small mb-4">
Sarah crafts user-centred interfaces across web and mobile, with a focus on accessibility and design systems.
</p>
<div class="d-flex justify-content-center gap-2 mb-4">
<a href="#" class="btn btn-outline-secondary btn-sm social-icon rounded-circle" aria-label="Twitter">
<i class="bi bi-twitter-x"></i>
</a>
<a href="#" class="btn btn-outline-secondary btn-sm social-icon rounded-circle" aria-label="LinkedIn">
<i class="bi bi-linkedin"></i>
</a>
<a href="#" class="btn btn-outline-secondary btn-sm social-icon rounded-circle" aria-label="GitHub">
<i class="bi bi-github"></i>
</a>
</div>
<a href="#" class="btn btn-primary btn-sm mt-auto">View Profile</a>
</div>
</div>
<!-- Variant 2: With Cover Banner -->
<div class="col">
<div class="card overflow-hidden h-100 shadow-sm">
<div class="profile-card-cover"></div>
<div class="card-body text-center pt-0">
<div class="d-flex justify-content-center">
<img src="https://i.pravatar.cc/88?img=12"
class="rounded-circle profile-card-avatar"
width="88" height="88" alt="Avatar of Marcus Reid">
</div>
<h5 class="card-title mt-3 mb-1">Marcus Reid</h5>
<p class="text-muted small mb-3">Senior Backend Engineer</p>
<div class="d-flex justify-content-center gap-3 text-muted small mb-3">
<span><i class="bi bi-geo-alt-fill me-1"></i>Manchester, UK</span>
<span><i class="bi bi-building me-1"></i>Engineering</span>
</div>
<a href="#" class="btn btn-outline-primary btn-sm w-100">Send Message</a>
</div>
</div>
</div>
<!-- Variant 3: Dark Theme -->
<div class="col">
<div class="card bg-dark text-white text-center p-4 h-100 shadow-sm">
<div class="d-flex justify-content-center mb-3">
<img src="https://i.pravatar.cc/88?img=47"
class="rounded-circle border border-3 border-secondary"
width="88" height="88" alt="Avatar of Priya Sharma">
</div>
<h5 class="card-title mb-1">Priya Sharma</h5>
<p class="text-secondary small mb-3">Data Scientist</p>
<div class="d-flex justify-content-center gap-2 mb-3">
<span class="badge bg-secondary">Python</span>
<span class="badge bg-secondary">ML</span>
<span class="badge bg-secondary">SQL</span>
</div>
<p class="small text-secondary mb-4">
Specialises in predictive modelling and NLP for enterprise clients across fintech and healthcare.
</p>
<a href="#" class="btn btn-outline-light btn-sm mt-auto">View Profile</a>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Live Examples
Horizontal Compact Profile Card
A left-aligned avatar with stacked name and role to the right. Ideal for comment sections, staff lists, or sidebar widgets where vertical space is at a premium.
Minimal Profile Card with Stats
A clean card showing key metrics below the person's details. Suited to marketplace or contributor profile listings where activity numbers matter.
Profile Card Grid - Team Page
Three profile cards in a responsive Bootstrap grid row. Drop this into any team or about page and adjust the column classes to suit your layout.
Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓Team grid layout with three-column responsive profile cards generated from a prompt such as 'add a meet the team section'
- ✓Speaker cards for event or conference pages, auto-generated with cover banner and social links
- ✓Sidebar profile widget for dashboard or account pages with compact horizontal layout
- ✓Dark-theme profile card grid for portfolio or agency sites with skill badge rows
- ✓Marketplace contributor cards with stats row and hire button, created from a single Canvas prompt
Best Practices
Avatar sizing and the rounded-circle utility
Bootstrap's rounded-circle utility requires equal width and height attributes on the img element to produce a true circle. Set both the HTML width/height attributes and matching CSS dimensions (or use object-fit: cover with a defined size) to prevent distortion when the source image is not square.
Overlapping avatar on a cover banner
Bootstrap has no built-in overlap utility, so use a small inline style or a defined custom class with a negative margin-top equal to half the avatar height (e.g. margin-top: -44px for an 88 px avatar). Pair this with overflow-hidden on the card so the banner does not spill outside the card border radius.
Equal-height cards in a grid
Add the h-100 class to every .card inside a Bootstrap grid column and use the d-flex flex-column classes on the card body to push footer actions to the bottom with mt-auto on the last element. This ensures all cards in a row align cleanly regardless of content length.
Accessible avatar images
Always provide a descriptive alt attribute on avatar images, for example 'Avatar of Sarah Okonkwo' rather than a blank or generic string. For purely decorative avatars where the name appears adjacent in text, an empty alt="" is acceptable, but social icon links must still carry aria-label attributes for screen reader users.