Badge

Badges are small labels for counts, statuses and tags. They take their size from the surrounding text, so they work in headings, buttons, tables and lists alike; combine them with colour, pill shape and position utilities.

1Background colours

text-bg-* sets a background and a readable text colour in one class.

PrimarySecondarySuccessDangerWarningInfoLightDark

<div class="d-flex flex-wrap gap-2">
  <span class="badge text-bg-primary">Primary</span><span class="badge text-bg-secondary">Secondary</span><span class="badge text-bg-success">Success</span><span class="badge text-bg-danger">Danger</span><span class="badge text-bg-warning">Warning</span><span class="badge text-bg-info">Info</span><span class="badge text-bg-light">Light</span><span class="badge text-bg-dark">Dark</span>
</div>

2Pill badges

rounded-pill gives badges fully rounded ends.

PrimarySecondarySuccessDangerWarningInfoLightDark

<div class="d-flex flex-wrap gap-2">
  <span class="badge rounded-pill text-bg-primary">Primary</span><span class="badge rounded-pill text-bg-secondary">Secondary</span><span class="badge rounded-pill text-bg-success">Success</span><span class="badge rounded-pill text-bg-danger">Danger</span><span class="badge rounded-pill text-bg-warning">Warning</span><span class="badge rounded-pill text-bg-info">Info</span><span class="badge rounded-pill text-bg-light">Light</span><span class="badge rounded-pill text-bg-dark">Dark</span>
</div>

3Subtle badges

Soft background, emphasis text and a subtle border: a quieter style for dense tables.

PrimarySecondarySuccessDangerWarningInfo

<div class="d-flex flex-wrap gap-2">
  <span class="badge bg-primary-subtle text-primary-emphasis border border-primary-subtle">Primary</span><span class="badge bg-secondary-subtle text-secondary-emphasis border border-secondary-subtle">Secondary</span><span class="badge bg-success-subtle text-success-emphasis border border-success-subtle">Success</span><span class="badge bg-danger-subtle text-danger-emphasis border border-danger-subtle">Danger</span><span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle">Warning</span><span class="badge bg-info-subtle text-info-emphasis border border-info-subtle">Info</span>
</div>

4Badges in headings

Badges scale with the font size of their parent.

Friendly update New

Reports Beta

Inbox 24

<h3>Friendly update <span class="badge text-bg-secondary">New</span></h3>
<h4>Reports <span class="badge text-bg-primary">Beta</span></h4>
<h5 class="mb-0">Inbox <span class="badge text-bg-danger">24</span></h5>

5Counters in buttons

A badge inside a button shows how many items wait behind it.

<div class="d-flex flex-wrap gap-2">
  <button type="button" class="btn btn-primary">Messages <span class="badge text-bg-light">6</span></button>
  <button type="button" class="btn btn-outline-secondary"><i class="bi bi-bell-fill" aria-hidden="true"></i> Alerts <span class="badge text-bg-danger">37</span></button>
  <button type="button" class="btn btn-success"><i class="bi bi-cart3" aria-hidden="true"></i> Cart <span class="badge rounded-pill text-bg-light">3</span></button>
</div>

6Positioned notification badges

Use position utilities to pin a counter or dot on the corner of a button.

<div class="d-flex flex-wrap gap-4 pt-2">
  <button type="button" class="btn btn-primary position-relative">Inbox<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">17+<span class="visually-hidden">unread messages</span></span></button>
  <button type="button" class="btn btn-light border position-relative" aria-label="Notifications"><i class="bi bi-bell-fill" aria-hidden="true"></i><span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle"><span class="visually-hidden">New alerts</span></span></button>
  <button type="button" class="btn btn-outline-dark position-relative" aria-label="Shopping cart"><i class="bi bi-bag-fill" aria-hidden="true"></i><span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-primary">5</span></button>
</div>

7Status dots on avatars

Small round badges show presence: online, away, offline or busy.

Isla

Ivy

Tariq

Kai

<div class="d-flex flex-wrap gap-4">
  <div class="text-center">
    <span class="position-relative d-inline-block"><img src="../assets/img/avatar-8.svg" alt="Isla Larsen" class="rounded-circle flex-shrink-0" width="56" height="56"><span class="position-absolute bottom-0 end-0 p-2 bg-success border border-2 border-white rounded-circle"><span class="visually-hidden">Online</span></span></span>
    <div class="small mt-1">
      Isla
    </div>
  </div>
  <div class="text-center">
    <span class="position-relative d-inline-block"><img src="../assets/img/avatar-10.svg" alt="Ivy Moreau" class="rounded-circle flex-shrink-0" width="56" height="56"><span class="position-absolute bottom-0 end-0 p-2 bg-warning border border-2 border-white rounded-circle"><span class="visually-hidden">Away</span></span></span>
    <div class="small mt-1">
      Ivy
    </div>
  </div>
  <div class="text-center">
    <span class="position-relative d-inline-block"><img src="../assets/img/avatar-4.svg" alt="Tariq Alvarez" class="rounded-circle flex-shrink-0" width="56" height="56"><span class="position-absolute bottom-0 end-0 p-2 bg-secondary border border-2 border-white rounded-circle"><span class="visually-hidden">Offline</span></span></span>
    <div class="small mt-1">
      Tariq
    </div>
  </div>
  <div class="text-center">
    <span class="position-relative d-inline-block"><img src="../assets/img/avatar-9.svg" alt="Kai Whitaker" class="rounded-circle flex-shrink-0" width="56" height="56"><span class="position-absolute bottom-0 end-0 p-2 bg-danger border border-2 border-white rounded-circle"><span class="visually-hidden">Busy</span></span></span>
    <div class="small mt-1">
      Kai
    </div>
  </div>
</div>

8Badges with icons

An icon before the label adds meaning without extra words.

Paid Pending Failed In transit Private

<div class="d-flex flex-wrap gap-2">
  <span class="badge text-bg-success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i> Paid</span><span class="badge text-bg-warning"><i class="bi bi-clock-fill" aria-hidden="true"></i> Pending</span><span class="badge text-bg-danger"><i class="bi bi-x-circle-fill" aria-hidden="true"></i> Failed</span><span class="badge text-bg-info"><i class="bi bi-truck" aria-hidden="true"></i> In transit</span><span class="badge text-bg-dark"><i class="bi bi-lock-fill" aria-hidden="true"></i> Private</span>
</div>

9Outline badges

Border and text colour utilities make a light outline style.

PrimarySecondarySuccessDangerWarningInfo

<div class="d-flex flex-wrap gap-2">
  <span class="badge border border-primary text-primary">Primary</span><span class="badge border border-secondary text-secondary">Secondary</span><span class="badge border border-success text-success">Success</span><span class="badge border border-danger text-danger">Danger</span><span class="badge border border-warning text-warning">Warning</span><span class="badge border border-info text-info">Info</span>
</div>

10Status badges in a table

Pill badges are the usual way to show order or payment status in admin tables.

Order	Customer	Total	Status
#TX-4263	Ravi Harlow	$196.62	Paid
#PO-9817	Lucas Haddad	$566.33	Pending
#PO-7119	Mateo Duarte	$72.14	Refunded
#INV-8355	Nora Ortega	$341.38	Failed

<div class="table-responsive">
  <table class="table align-middle mb-0">
    <thead>
      <tr>
        <th scope="col">Order</th>
        <th scope="col">Customer</th>
        <th scope="col">Total</th>
        <th scope="col">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>#TX-4263</td>
        <td>Ravi Harlow</td>
        <td>$196.62</td>
        <td><span class="badge rounded-pill bg-success-subtle text-success-emphasis">Paid</span></td>
      </tr>
      <tr>
        <td>#PO-9817</td>
        <td>Lucas Haddad</td>
        <td>$566.33</td>
        <td><span class="badge rounded-pill bg-warning-subtle text-warning-emphasis">Pending</span></td>
      </tr>
      <tr>
        <td>#PO-7119</td>
        <td>Mateo Duarte</td>
        <td>$72.14</td>
        <td><span class="badge rounded-pill bg-secondary-subtle text-secondary-emphasis">Refunded</span></td>
      </tr>
      <tr>
        <td>#INV-8355</td>
        <td>Nora Ortega</td>
        <td>$341.38</td>
        <td><span class="badge rounded-pill bg-danger-subtle text-danger-emphasis">Failed</span></td>
      </tr>
    </tbody>
  </table>
</div>

11Tag cloud

Badges as links make a list of tags or categories.

#update #release #design #product #insights #guide #tutorial #news

<div class="d-flex flex-wrap gap-2">
  <a href="#" class="badge rounded-pill text-bg-light border text-decoration-none fw-normal fs-6">#update</a><a href="#" class="badge rounded-pill text-bg-light border text-decoration-none fw-normal fs-6">#release</a><a href="#" class="badge rounded-pill text-bg-light border text-decoration-none fw-normal fs-6">#design</a><a href="#" class="badge rounded-pill text-bg-light border text-decoration-none fw-normal fs-6">#product</a><a href="#" class="badge rounded-pill text-bg-light border text-decoration-none fw-normal fs-6">#insights</a><a href="#" class="badge rounded-pill text-bg-light border text-decoration-none fw-normal fs-6">#guide</a><a href="#" class="badge rounded-pill text-bg-light border text-decoration-none fw-normal fs-6">#tutorial</a><a href="#" class="badge rounded-pill text-bg-light border text-decoration-none fw-normal fs-6">#news</a>
</div>

12Removable chips

A small close button inside a pill badge, as used for active filters.

BeachUnder $100In stock4 stars & up

<div class="d-flex flex-wrap gap-2">
  <span class="badge rounded-pill text-bg-light border d-inline-flex align-items-center gap-2 fw-normal fs-6 py-1">Beach
  <button type="button" class="btn-close" style="font-size: .55rem;" aria-label="Remove filter"></button>
  </span><span class="badge rounded-pill text-bg-light border d-inline-flex align-items-center gap-2 fw-normal fs-6 py-1">Under $100
  <button type="button" class="btn-close" style="font-size: .55rem;" aria-label="Remove filter"></button>
  </span><span class="badge rounded-pill text-bg-light border d-inline-flex align-items-center gap-2 fw-normal fs-6 py-1">In stock
  <button type="button" class="btn-close" style="font-size: .55rem;" aria-label="Remove filter"></button>
  </span><span class="badge rounded-pill text-bg-light border d-inline-flex align-items-center gap-2 fw-normal fs-6 py-1">4 stars &amp; up
  <button type="button" class="btn-close" style="font-size: .55rem;" aria-label="Remove filter"></button>
  </span>
</div>

13Badge sizes

Badges inherit font size, so font-size utilities make them bigger or smaller.

TinyDefaultMediumLargeHuge

<div class="d-flex flex-wrap align-items-center gap-2">
  <span class="badge text-bg-primary small" style="font-size: .65rem;">Tiny</span><span class="badge text-bg-primary">Default</span><span class="badge text-bg-primary fs-6">Medium</span><span class="badge text-bg-primary fs-5">Large</span><span class="badge text-bg-primary fs-4 px-3">Huge</span>
</div>

14Product labels

Badges positioned on product photos highlight sales and new arrivals.

Sale

Safari adventure

$2,000

New

City break

$202.99

Best seller

Northern lights trip

$1,250

<div class="row row-cols-1 row-cols-sm-3 g-3">
  <div class="col">
    <div class="card h-100">
      <div class="position-relative">
        <img src="../assets/img/product-5.svg" class="card-img-top" alt="Safari adventure"><span class="badge text-bg-danger position-absolute top-0 start-0 m-2">Sale</span>
      </div>
      <div class="card-body">
        <h6 class="card-title mb-1">Safari adventure</h6>
        <span class="fw-semibold">$2,000</span>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <div class="position-relative">
        <img src="../assets/img/product-2.svg" class="card-img-top" alt="City break"><span class="badge text-bg-success position-absolute top-0 start-0 m-2">New</span>
      </div>
      <div class="card-body">
        <h6 class="card-title mb-1">City break</h6>
        <span class="fw-semibold">$202.99</span>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <div class="position-relative">
        <img src="../assets/img/product-8.svg" class="card-img-top" alt="Northern lights trip"><span class="badge text-bg-warning position-absolute top-0 start-0 m-2">Best seller</span>
      </div>
      <div class="card-body">
        <h6 class="card-title mb-1">Northern lights trip</h6>
        <span class="fw-semibold">$1,250</span>
      </div>
    </div>
  </div>
</div>

15Plan and version labels

Small labels next to names flag plans, roles or software versions.

Theo Carter Pro
Mason Kowalski Admin Owner
Mobile app v3.5
Insights Beta

<ul class="list-unstyled mb-0">
  <li class="mb-2">Theo Carter <span class="badge text-bg-primary"><i class="bi bi-gem" aria-hidden="true"></i> Pro</span></li>
  <li class="mb-2">Mason Kowalski <span class="badge text-bg-dark">Admin</span> <span class="badge border text-body-secondary">Owner</span></li>
  <li class="mb-2">Mobile app <span class="badge bg-info-subtle text-info-emphasis">v3.5</span></li>
  <li>Insights <span class="badge text-bg-warning">Beta</span></li>
</ul>

16Counts in a list group

Pill badges aligned to the end of list items show a count per category.

Inbox19
Starred2
Trash3

<ul class="list-group" style="max-width: 380px;">
  <li class="list-group-item d-flex justify-content-between align-items-center"><i class="bi bi-inbox-fill" aria-hidden="true"></i> <span class="me-auto ms-2">Inbox</span><span class="badge text-bg-primary rounded-pill">19</span></li>
  <li class="list-group-item d-flex justify-content-between align-items-center"><i class="bi bi-star-fill" aria-hidden="true"></i> <span class="me-auto ms-2">Starred</span><span class="badge text-bg-secondary rounded-pill">2</span></li>
  <li class="list-group-item d-flex justify-content-between align-items-center"><i class="bi bi-trash-fill" aria-hidden="true"></i> <span class="me-auto ms-2">Trash</span><span class="badge text-bg-light rounded-pill">3</span></li>
</ul>

17Most popular ribbon

A badge on the top edge of a pricing card marks the recommended plan.

Team

$32/month

<div class="card border-primary text-center position-relative mx-auto mt-3" style="max-width: 280px;">
  <span class="position-absolute top-0 start-50 translate-middle badge rounded-pill text-bg-primary px-3 py-2"><i class="bi bi-star-fill" aria-hidden="true"></i> Most popular</span>
  <div class="card-body pt-4">
    <h5 class="card-title">Team</h5>
    <div class="display-6 fw-bold">
      $32<span class="fs-6 fw-normal text-body-secondary">/month</span>
    </div>
    <button type="button" class="btn btn-primary w-100 mt-3">Choose Team</button>
  </div>
</div>

18Counts in navigation

Badges inside nav pills show how many items each tab holds.

<ul class="nav nav-pills gap-1">
  <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">All <span class="badge text-bg-light">87</span></a></li>
  <li class="nav-item"><a class="nav-link" href="#">Open <span class="badge text-bg-primary">13</span></a></li>
  <li class="nav-item"><a class="nav-link" href="#">Closed <span class="badge text-bg-secondary">21</span></a></li>
</ul>

19Avatar group with overflow

Overlapping avatars followed by a +N badge for the people not shown.

+5 more

<div class="d-flex align-items-center">
  <img src="../assets/img/avatar-7.svg" alt="Zoe Okafor" class="rounded-circle border border-2 border-white ca-stack" width="40" height="40"><img src="../assets/img/avatar-3.svg" alt="Felix Morgan" class="rounded-circle border border-2 border-white ca-stack" width="40" height="40"><img src="../assets/img/avatar-8.svg" alt="Ava Okafor" class="rounded-circle border border-2 border-white ca-stack" width="40" height="40"><img src="../assets/img/avatar-12.svg" alt="Lea Rossi" class="rounded-circle border border-2 border-white ca-stack" width="40" height="40"><span class="badge rounded-pill text-bg-secondary ms-2">+5 more</span>
</div>

20Scores and ratings

Badges summarise review scores and quality ratings.

4.09.7 Excellent 740 reviews Top rated

<div class="d-flex flex-wrap gap-3 align-items-center">
  <span class="badge text-bg-success fs-6"><i class="bi bi-star-fill" aria-hidden="true"></i> 4.0</span><span><span class="badge text-bg-primary fs-5">9.7</span> <span class="fw-semibold">Excellent</span> <span class="text-body-secondary small">740 reviews</span></span><span class="badge bg-warning-subtle text-warning-emphasis"><i class="bi bi-award-fill" aria-hidden="true"></i> Top rated</span>
</div>