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="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="flex flex-wrap gap-2">
<span class="badge rounded-full text-bg-primary">Primary</span><span class="badge rounded-full text-bg-secondary">Secondary</span><span class="badge rounded-full text-bg-success">Success</span><span class="badge rounded-full text-bg-danger">Danger</span><span class="badge rounded-full text-bg-warning">Warning</span><span class="badge rounded-full text-bg-info">Info</span><span class="badge rounded-full text-bg-light">Light</span><span class="badge rounded-full 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="flex flex-wrap gap-2">
<span class="badge bg-primary-subtle text-primary-emphasis border border-primary/30">Primary</span><span class="badge bg-secondary-subtle text-secondary-emphasis border border-secondary/30">Secondary</span><span class="badge bg-success-subtle text-success-emphasis border border-success/30">Success</span><span class="badge bg-danger-subtle text-danger-emphasis border border-danger/30">Danger</span><span class="badge bg-warning-subtle text-warning-emphasis border border-warning/30">Warning</span><span class="badge bg-info-subtle text-info-emphasis border border-info/30">Info</span>
</div>4Badges in headings
Badges scale with the font size of their parent.
Modern workflow New
Reports Beta
Inbox 26
<h3>Modern workflow <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">26</span></h5>5Counters in buttons
A badge inside a button shows how many items wait behind it.
<div class="flex flex-wrap gap-2">
<button type="button" class="btn btn-primary">Messages <span class="badge text-bg-light">7</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">21</span></button>
<button type="button" class="btn btn-success"><i class="bi bi-cart3" aria-hidden="true"></i> Cart <span class="badge rounded-full 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="flex flex-wrap gap-6 pt-2">
<button type="button" class="btn btn-primary relative">Inbox<span class="absolute top-0 start-full -translate-x-1/2 -translate-y-1/2 badge rounded-full bg-danger">84+<span class="sr-only">unread messages</span></span></button>
<button type="button" class="btn btn-light border relative" aria-label="Notifications"><i class="bi bi-bell-fill" aria-hidden="true"></i><span class="absolute top-0 start-full -translate-x-1/2 -translate-y-1/2 p-2 bg-danger border border-light rounded-full"><span class="sr-only">New alerts</span></span></button>
<button type="button" class="btn btn-outline-dark relative" aria-label="Shopping cart"><i class="bi bi-bag-fill" aria-hidden="true"></i><span class="absolute top-0 start-full -translate-x-1/2 -translate-y-1/2 badge rounded-full bg-primary">8</span></button>
</div>7Status dots on avatars
Small round badges show presence: online, away, offline or busy.
OnlineAva
AwayFreya
OfflineMateo
BusyEthan
<div class="flex flex-wrap gap-6">
<div class="text-center">
<span class="relative inline-block"><img src="../assets/img/avatar-9.svg" alt="Ava Kim" class="rounded-full shrink-0" width="56" height="56"><span class="absolute bottom-0 end-0 p-2 bg-success border border-2 border-white rounded-full"><span class="sr-only">Online</span></span></span>
<div class="small mt-1">
Ava
</div>
</div>
<div class="text-center">
<span class="relative inline-block"><img src="../assets/img/avatar-8.svg" alt="Freya Delgado" class="rounded-full shrink-0" width="56" height="56"><span class="absolute bottom-0 end-0 p-2 bg-warning border border-2 border-white rounded-full"><span class="sr-only">Away</span></span></span>
<div class="small mt-1">
Freya
</div>
</div>
<div class="text-center">
<span class="relative inline-block"><img src="../assets/img/avatar-5.svg" alt="Mateo Hughes" class="rounded-full shrink-0" width="56" height="56"><span class="absolute bottom-0 end-0 p-2 bg-secondary border border-2 border-white rounded-full"><span class="sr-only">Offline</span></span></span>
<div class="small mt-1">
Mateo
</div>
</div>
<div class="text-center">
<span class="relative inline-block"><img src="../assets/img/avatar-9.svg" alt="Ethan Whitaker" class="rounded-full shrink-0" width="56" height="56"><span class="absolute bottom-0 end-0 p-2 bg-danger border border-2 border-white rounded-full"><span class="sr-only">Busy</span></span></span>
<div class="small mt-1">
Ethan
</div>
</div>
</div>8Badges with icons
An icon before the label adds meaning without extra words.
Paid Pending Failed In transit Private
<div class="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="flex flex-wrap gap-2">
<span class="badge border border-primary text-primary-ink">Primary</span><span class="badge border border-secondary text-secondary">Secondary</span><span class="badge border border-success text-success-emphasis">Success</span><span class="badge border border-danger text-danger-emphasis">Danger</span><span class="badge border border-warning text-warning-emphasis">Warning</span><span class="badge border border-info text-info-emphasis">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 |
|---|---|---|---|
| #PO-2223 | Kai Okafor | $238.12 | Paid |
| #ORD-6144 | Luna Nguyen | $393.22 | Pending |
| #PO-1156 | Liam Morgan | $268.19 | Refunded |
| #INV-1335 | Owen Patel | $380.01 | 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>#PO-2223</td>
<td>Kai Okafor</td>
<td>$238.12</td>
<td><span class="badge rounded-full bg-success-subtle text-success-emphasis">Paid</span></td>
</tr>
<tr>
<td>#ORD-6144</td>
<td>Luna Nguyen</td>
<td>$393.22</td>
<td><span class="badge rounded-full bg-warning-subtle text-warning-emphasis">Pending</span></td>
</tr>
<tr>
<td>#PO-1156</td>
<td>Liam Morgan</td>
<td>$268.19</td>
<td><span class="badge rounded-full bg-secondary-subtle text-secondary-emphasis">Refunded</span></td>
</tr>
<tr>
<td>#INV-1335</td>
<td>Owen Patel</td>
<td>$380.01</td>
<td><span class="badge rounded-full 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.
<div class="flex flex-wrap gap-2">
<a href="#" class="badge rounded-full text-bg-light border no-underline font-normal text-base">#news</a><a href="#" class="badge rounded-full text-bg-light border no-underline font-normal text-base">#tips</a><a href="#" class="badge rounded-full text-bg-light border no-underline font-normal text-base">#product</a><a href="#" class="badge rounded-full text-bg-light border no-underline font-normal text-base">#design</a><a href="#" class="badge rounded-full text-bg-light border no-underline font-normal text-base">#insights</a><a href="#" class="badge rounded-full text-bg-light border no-underline font-normal text-base">#case study</a><a href="#" class="badge rounded-full text-bg-light border no-underline font-normal text-base">#community</a><a href="#" class="badge rounded-full text-bg-light border no-underline font-normal text-base">#update</a>
</div>12Removable chips
A small close button inside a pill badge, as used for active filters.
MeetupUnder $100In stock4 stars & up
<div class="flex flex-wrap gap-2">
<span class="badge rounded-full text-bg-light border inline-flex items-center gap-2 font-normal text-base py-1">Meetup
<button type="button" class="btn-close" style="font-size: .55rem;" aria-label="Remove filter"></button>
</span><span class="badge rounded-full text-bg-light border inline-flex items-center gap-2 font-normal text-base py-1">Under $100
<button type="button" class="btn-close" style="font-size: .55rem;" aria-label="Remove filter"></button>
</span><span class="badge rounded-full text-bg-light border inline-flex items-center gap-2 font-normal text-base py-1">In stock
<button type="button" class="btn-close" style="font-size: .55rem;" aria-label="Remove filter"></button>
</span><span class="badge rounded-full text-bg-light border inline-flex items-center gap-2 font-normal text-base py-1">4 stars & 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="flex flex-wrap 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 text-base">Medium</span><span class="badge text-bg-primary text-lg">Large</span><span class="badge text-bg-primary text-xl px-4">Huge</span>
</div>14Product labels
Badges positioned on product photos highlight sales and new arrivals.
SaleMasterclass
$274.00
NewEvening meetup
$24.00
Best sellerFull access pass
$459.00<div class="row row-cols-1 row-cols-sm-3 g-3">
<div class="col">
<div class="card h-full">
<div class="relative">
<img src="../assets/img/product-9.svg" class="card-img-top" alt="Masterclass"><span class="badge text-bg-danger absolute top-0 start-0 m-2">Sale</span>
</div>
<div class="card-body">
<h6 class="card-title mb-1">Masterclass</h6>
<span class="font-semibold">$274.00</span>
</div>
</div>
</div>
<div class="col">
<div class="card h-full">
<div class="relative">
<img src="../assets/img/product-7.svg" class="card-img-top" alt="Evening meetup"><span class="badge text-bg-success absolute top-0 start-0 m-2">New</span>
</div>
<div class="card-body">
<h6 class="card-title mb-1">Evening meetup</h6>
<span class="font-semibold">$24.00</span>
</div>
</div>
</div>
<div class="col">
<div class="card h-full">
<div class="relative">
<img src="../assets/img/product-2.svg" class="card-img-top" alt="Full access pass"><span class="badge text-bg-warning absolute top-0 start-0 m-2">Best seller</span>
</div>
<div class="card-body">
<h6 class="card-title mb-1">Full access pass</h6>
<span class="font-semibold">$459.00</span>
</div>
</div>
</div>
</div>15Plan and version labels
Small labels next to names flag plans, roles or software versions.
- Jonah Brennan Pro
- Nora Moreau Admin Owner
- Mobile app v2.1
- Insights Beta
<ul class="list-unstyled mb-0">
<li class="mb-2">Jonah Brennan <span class="badge text-bg-primary"><i class="bi bi-gem" aria-hidden="true"></i> Pro</span></li>
<li class="mb-2">Nora Moreau <span class="badge text-bg-dark">Admin</span> <span class="badge border text-muted">Owner</span></li>
<li class="mb-2">Mobile app <span class="badge bg-info-subtle text-info-emphasis">v2.1</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.
- Inbox31
- Starred6
- Trash0
<ul class="list-group" style="max-width: 380px;">
<li class="list-group-item flex justify-between 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-full">31</span></li>
<li class="list-group-item flex justify-between 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-full">6</span></li>
<li class="list-group-item flex justify-between 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-full">0</span></li>
</ul>17Most popular ribbon
A badge on the top edge of a pricing card marks the recommended plan.
Most popular
Team
$32/month
<div class="card border-primary text-center relative mx-auto mt-4" style="max-width: 280px;">
<span class="absolute top-0 start-1/2 -translate-x-1/2 -translate-y-1/2 badge rounded-full text-bg-primary px-4 py-2"><i class="bi bi-star-fill" aria-hidden="true"></i> Most popular</span>
<div class="card-body pt-6">
<h5 class="card-title">Team</h5>
<div class="display-6 font-bold">
$32<span class="text-base font-normal text-muted">/month</span>
</div>
<button type="button" class="btn btn-primary w-full mt-4">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">59</span></a></li>
<li class="nav-item"><a class="nav-link" href="#">Open <span class="badge text-bg-primary">5</span></a></li>
<li class="nav-item"><a class="nav-link" href="#">Closed <span class="badge text-bg-secondary">31</span></a></li>
</ul>19Avatar group with overflow
Overlapping avatars followed by a +N badge for the people not shown.
+13 more<div class="flex items-center">
<img src="../assets/img/avatar-1.svg" alt="Hana Fischer" class="rounded-full border border-2 border-white ca-stack" width="40" height="40"><img src="../assets/img/avatar-5.svg" alt="Priya Novak" class="rounded-full border border-2 border-white ca-stack" width="40" height="40"><img src="../assets/img/avatar-8.svg" alt="Arjun Moreau" class="rounded-full border border-2 border-white ca-stack" width="40" height="40"><img src="../assets/img/avatar-9.svg" alt="Ravi Alvarez" class="rounded-full border border-2 border-white ca-stack" width="40" height="40"><span class="badge rounded-full text-bg-secondary ms-2">+13 more</span>
</div>20Scores and ratings
Badges summarise review scores and quality ratings.
4.89.1 Excellent 356 reviews Top rated
<div class="flex flex-wrap gap-4 items-center">
<span class="badge text-bg-success text-base"><i class="bi bi-star-fill" aria-hidden="true"></i> 4.8</span><span><span class="badge text-bg-primary text-lg">9.1</span> <span class="font-semibold">Excellent</span> <span class="text-muted small">356 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>