Documentation and examples for badges, our small count and labeling component.
Read the official
Bootstrap Documentation for a full list of instructions
and
other options.
Badges scale to match the size of the immediate parent element by using relative font sizing and
em units.
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>Badges can be used as part of links or buttons to provide a counter & notifications.
<button type="button" class="btn btn-primary"></button>
Message
<span class="badge bg-primary badge-notifications ms-1">4</span>
<span class="visually-hidden">unread messages</span>
</button>
<button type="button" class="btn btn-secondary text-nowrap d-inline-block">
Badge
<span class="badge badge-primary badge-notifications">12</span>
<span class="visually-hidden">unread notifications</span>
</button>
<button type="button" class="btn text-nowrap d-inline-block">
<span class="tf-icons bx bx-bell"></span>
<span class="badge rounded-pill badge-danger badge-notifications">10</span>
<span class="visually-hidden">unread notifications</span>
</button>
<button type="button" class="btn text-nowrap d-inline-block">
<span class="tf-icons bx bxl-facebook-square"></span>
<span class="badge rounded-pill badge-danger badge-dot badge-notifications"></span>
<span class="visually-hidden">notifications</span>
</button>Add any of the below mentioned modifier classes to change the appearance of a badge.
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning">Warning</span>
<span class="badge bg-info">Info</span>
<span class="badge bg-dark">Dark</span>| Class | Value |
|---|---|
class="badge bg-{value}"
|
primary | secondary | success | danger | warning | info | dark |
Badges with light background color. Replace the default modifier classes with the
.bg-label-{value}.
<span class="badge bg-label-primary">Primary</span>
<span class="badge bg-label-secondary">Secondary</span>
<span class="badge bg-label-success">Success</span>
<span class="badge bg-label-danger">Danger</span>
<span class="badge bg-label-warning">Warning</span>
<span class="badge bg-label-info">Info</span>
<span class="badge bg-label-dark">Dark</span>| Class | Value |
|---|---|
class="badge bg-label-{value}"
|
primary | secondary | success | danger | warning | info | dark |
Use the .rounded-pill modifier class to make badges more rounded (with a larger
border-radius and additional horizontal padding).
You can also use .rounded-pill class with .bg-label-{value}.
<p>
<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning">Warning</span>
<span class="badge rounded-pill bg-info">Info</span>
<span class="badge rounded-pill bg-dark">Dark</span>
</p>
<p>
<span class="badge rounded-pill bg-label-primary">Primary</span>
<span class="badge rounded-pill bg-label-secondary">Secondary</span>
<span class="badge rounded-pill bg-label-success">Success</span>
<span class="badge rounded-pill bg-label-danger">Danger</span>
<span class="badge rounded-pill bg-label-warning">Warning</span>
<span class="badge rounded-pill bg-label-info">Info</span>
<span class="badge rounded-pill bg-label-dark">Dark</span>
</p>
Using the contextual .bg-{value} classes inside an <a> element quickly provide
actionable badges.
<a href="javascript:void(0)"><span class="badge bg-primary">Primary</span></a>
<a href="javascript:void(0)"><span class="badge bg-secondary">Secondary</span></a>
<a href="javascript:void(0)"><span class="badge bg-success">Success</span></a>
<a href="javascript:void(0)"><span class="badge bg-danger">Danger</span></a>
<a href="javascript:void(0)"><span class="badge bg-warning">Warning</span></a>
<a href="javascript:void(0)"><span class="badge bg-info">Info</span></a>
<a href="javascript:void(0)"><span class="badge bg-dark">Dark</span></a>
Badges can be used as part of links or buttons to provide a counter. Style button with badges with
.bg-label-{value}.
<p>
<button type="button" class="btn btn-primary me-3">
Text
<span class="badge bg-white text-primary ms-1">4</span>
</button>
<button type="button" class="btn btn-primary me-3">
Text
<span class="badge bg-secondary rounded-pill ms-1">4</span>
</button>
</p>
<p>
<button type="button" class="btn btn-label-primary me-3">
Text
<span class="badge bg-white text-primary ms-1">4</span>
</button>
<button type="button" class="btn btn-label-primary me-3">
Text
<span class="badge bg-secondary rounded-pill ms-1">4</span>
</button>
</p>
<p>
<button type="button" class="btn btn-outline-primary me-3">
Text
<span class="badge">4</span>
</button>
<button type="button" class="btn btn-outline-primary me-3">
Text
<span class="badge rounded-pill ms-1">4</span>
</button>
</p>
Make circle & square badge by using .badge-center class, use .rounded-pills class for
circle badge.
You can also use .bg-label-{value} style with this.
1
1
1
1
<div class="row gy-3">
<div class="col-xl-6">
<h6>Basic</h6>
<div class="demo-inline-spacing">
<p>
<span class="badge badge-center rounded-pill bg-primary">1</span>
<span class="badge badge-center rounded-pill bg-secondary"><i class='bx bx-star'></i></span>
</p>
<p>
<span class="badge badge-center bg-primary">1</span>
<span class="badge badge-center bg-secondary"><i class='bx bx-star'></i></span>
</p>
</div>
</div>
<div class="col-xl-6">
<h6>Label</h6>
<div class="demo-inline-spacing">
<p>
<span class="badge badge-center rounded-pill bg-label-primary">1</span>
<span class="badge badge-center rounded-pill bg-label-secondary"><i class='bx bx-star'></i></span>
</p>
<p>
<span class="badge badge-center bg-label-primary">1</span>
<span class="badge badge-center bg-label-secondary"><i class='bx bx-star'></i></span>
</p>
</div>
</div>
</div>| Class | Value |
|---|---|
class="badge badge-center bg-{value}"
|
primary | secondary | success | danger | warning | info | dark |
Use class .badge-notifications for notifications badges. You can also create dot style
notifications by using .badge-dot.
Style notifications badges with .bg-label-{value}.
<button type="button" class="btn btn-secondary text-nowrap d-inline-block me-3">
Badge
<span class="badge bg-primary badge-notifications">12</span>
</button>
<button type="button" class="btn btn-secondary text-nowrap d-inline-block me-3">
Label Badge
<span class="badge bg-white text-secondary badge-notifications">12</span>
</button>
<button type="button" class="btn btn-secondary text-nowrap d-inline-block me-3">
Pill
<span class="badge rounded-pill bg-info badge-notifications">12</span>
</button>
<button type="button" class="btn btn-secondary text-nowrap d-inline-block me-3">
Dot
<span class="badge badge-dot bg-danger badge-notifications"></span>
</button>
<button type="button" class="btn text-nowrap d-inline-block me-3">
<span class="tf-icons bx bx-envelope"></span>
<span class="badge bg-primary badge-notifications">6</span>
</button>
<button type="button" class="btn text-nowrap d-inline-block me-3">
<span class="tf-icons bx bxl-twitter"></span>
<span class="badge rounded-pill bg-label-info badge-notifications">5</span>
</button>
<button type="button" class="btn text-nowrap d-inline-block me-3">
<span class="tf-icons bx bx-bell"></span>
<span class="badge rounded-pill bg-danger badge-notifications">10</span>
</button>
<button type="button" class="btn text-nowrap d-inline-block me-3">
<span class="tf-icons bx bxl-facebook-square"></span>
<span class="badge rounded-pill bg-danger badge-dot badge-notifications"></span>
</button>Use class .badge-dot to create dot style badge.
<div class="d-flex align-items-center lh-1 me-3">
<span class="badge badge-dot bg-primary me-1"></span> Primary
</div>
<div class="d-flex align-items-center lh-1 me-3">
<span class="badge badge-dot bg-secondary me-1"></span> Secondary
</div>
<div class="d-flex align-items-center lh-1 me-3">
<span class="badge badge-dot bg-success me-1"></span> Success
</div>
<div class="d-flex align-items-center lh-1 me-3">
<span class="badge badge-dot bg-danger me-1"></span> Danger
</div>
<div class="d-flex align-items-center lh-1 me-3">
<span class="badge badge-dot bg-warning me-1"></span> Warning
</div>
<div class="d-flex align-items-center lh-1 me-3">
<span class="badge badge-dot bg-info me-1"></span> Info
</div>