Bootstrap 5Content

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.

Bootstrap class

.card

Common 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 and classes

Variant	Description and classes	Classes
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.`card text-center p-4 d-flex flex-column align-items-center`	`card text-center p-4 d-flex flex-column align-items-center`
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.`card d-flex flex-row align-items-center gap-3 p-3`	`card d-flex flex-row align-items-center gap-3 p-3`
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.`card overflow-hidden`	`card overflow-hidden`
Dark Theme	Uses bg-dark text-white on the card with muted secondary text, suitable for dark dashboards or night-mode interfaces.`card bg-dark text-white text-center p-4`	`card bg-dark text-white text-center p-4`

Code example

HTML

<!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.

Example 1

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.

Example 2

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.

Example 3

Canvas template variants

Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:

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.

FAQ

Does Bootstrap 5 have an official Profile Card component?

No. Bootstrap 5 does not ship a profile card component. The pattern is built by composing the .card primitive with flexbox utilities (d-flex, flex-column, align-items-center), spacing helpers (p-*, gap-*), and typography classes. Any custom styles such as the cover banner overlap require a small inline style block or a dedicated CSS class.

How do I make profile cards the same height in a grid row?

Add h-100 to the .card element within each grid column. Bootstrap's row uses flexbox by default, so each column stretches to the tallest in the row. Combine h-100 with d-flex flex-column on the card body and mt-auto on the bottom action button to pin it to the card foot regardless of how much content sits above it.

What is the best way to display social icon links accessibly?

Use anchor tags with a descriptive aria-label attribute on each icon link, for example aria-label="LinkedIn profile of Sarah Okonkwo". If you are using Bootstrap Icons, the SVG or icon font element itself should carry aria-hidden="true" so screen readers do not announce the glyph name, relying instead on the parent link's aria-label.

Can I add a follow or connection button without breaking the card layout?

Yes. Place the button inside the .card-footer element with bg-transparent to remove the default grey background, or use mt-auto inside a d-flex flex-column card body to push it to the bottom. Keep button widths consistent across a card grid by using w-100 or a fixed min-width so cards of differing content length still align visually.