Bootstrap 5 profile cards display user information in a visually appealing format. This page covers 4 profile card patterns — basic, team member, social and horizontal — each ready to use in dashboards and team pages.
Quick Setup
Profile cards need only Bootstrap 5 CSS:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
Key Classes Reference
| Class | What It Does |
|---|---|
.card | Card wrapper |
.rounded-circle | Circular avatar image |
.text-center | Centers all card content |
.shadow-sm | Subtle card shadow |
.border-3 | Thick border on avatar |
.overflow-hidden | Clips cover image to card |
1. Basic Bootstrap 5 Profile Card
A centered profile card with avatar, name, role, stats and action buttons.
2. Bootstrap 5 Team Member Card
Team member cards in a grid layout with social links.
4. Bootstrap 5 Horizontal Profile Card
A horizontal profile card with avatar on the left and details on the right.
Frequently Asked Questions
Use the Bootstrap card component with text-center for centered layout. Add an img with rounded-circle for the avatar. Use d-flex justify-content-center for stats row. Add btn for action buttons. No custom CSS needed for a basic profile card.
Add a div before the card-body with a fixed height and background color or image. Set overflow-hidden on the card. Use negative margin-top on the avatar image to overlap the cover: style='margin-top:-36px'. This creates the social media profile card effect.
Add h-100 to each card and use row row-cols-1 row-cols-md-3 g-4 on the wrapper div. Bootstrap flexbox makes all cards in a row equal height automatically.
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.
3. Bootstrap 5 Social Profile Card
A rich social profile card with cover image, avatar, bio and social stats.