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-label-secondary text-nowrap d-inline-block position-relative">
Badge
<span class="badge bg-secondary position-absolute top-0 start-100 translate-middle">12</span>
<span class="visually-hidden">unread notifications</span>
</button>
<button type="button" class="btn text-nowrap d-inline-block">
<span class="tf-icons ri-notification-4-line"></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 ri-facebook-fill"></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-4">
Text
<span class="badge bg-white text-primary ms-1">4</span>
</button>
<button type="button" class="btn btn-primary me-4">
Text
<span class="badge bg-secondary rounded-pill ms-1">4</span>
</button>
</p>
<p>
<button type="button" class="btn btn-label-primary me-4">
Text
<span class="badge bg-white text-primary ms-1">4</span>
</button>
<button type="button" class="btn btn-label-primary me-4">
Text
<span class="badge bg-secondary rounded-pill ms-1">4</span>
</button>
</p>
<p>
<button type="button" class="btn btn-outline-primary me-4">
Text
<span class="badge ms-1">4</span>
</button>
<button type="button" class="btn btn-outline-primary me-4">
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 row-bordered g-0">
<div class="col-xl-6 p-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='ri-star-line'></i></span>
</p>
<p>
<span class="badge badge-center bg-primary">1</span>
<span class="badge badge-center bg-secondary"><i class='ri-star-line'></i></span>
</p>
</div>
</div>
<div class="col-xl-6 p-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='ri-star-line'></i></span>
</p>
<p>
<span class="badge badge-center bg-label-primary">1</span>
<span class="badge badge-center bg-label-secondary"><i class='ri-star-line'></i></span>
</p>
</div>
</div>
</div>
Class | Value |
---|---|
class="badge badge-center bg-{value}"
|
primary | secondary | success | danger | warning | info | dark |
Use class .badge-dot
to create dot style badge.
<div class="d-flex align-items-center lh-1 me-4">
<span class="badge badge-dot bg-primary me-1"></span> Primary
</div>
<div class="d-flex align-items-center lh-1 me-4">
<span class="badge badge-dot bg-secondary me-1"></span> Secondary
</div>
<div class="d-flex align-items-center lh-1 me-4">
<span class="badge badge-dot bg-success me-1"></span> Success
</div>
<div class="d-flex align-items-center lh-1 me-4">
<span class="badge badge-dot bg-danger me-1"></span> Danger
</div>
<div class="d-flex align-items-center lh-1 me-4">
<span class="badge badge-dot bg-warning me-1"></span> Warning
</div>
<div class="d-flex align-items-center lh-1 me-4">
<span class="badge badge-dot bg-info me-1"></span> Info
</div>
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 text-nowrap d-inline-block me-4">
<span class="tf-icons ri-mail-line"></span>
<span class="badge bg-primary badge-notifications">6</span>
</button>
<button type="button" class="btn text-nowrap d-inline-block me-4">
<span class="tf-icons ri-twitter-fill"></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-4">
<span class="tf-icons ri-notification-4-line"></span>
<span class="badge rounded-pill bg-danger badge-notifications">10</span>
</button>
<button type="button" class="btn text-nowrap d-inline-block me-4">
<span class="tf-icons ri-facebook-fill"></span>
<span class="badge rounded-pill bg-danger badge-dot badge-notifications"></span>
</button>
Use utilities to modify a .badge
and position it in the corner of a link or button.
<button type="button" class="btn btn-label-primary text-nowrap d-inline-flex position-relative me-4">
Badge
<span class="position-absolute top-0 start-100 translate-middle badge bg-primary text-white">2</span>
</button>
<button type="button" class="btn btn-warning text-nowrap d-inline-flex position-relative me-4">
Label Badge
<span class="position-absolute top-0 start-100 translate-middle badge bg-label-warning border border-warning">2</span>
</button>
<button type="button" class="btn btn-label-info text-nowrap d-inline-flex position-relative me-4">
Pill
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-info text-white">2</span>
</button>
<button type="button" class="btn btn-label-danger text-nowrap d-inline-flex position-relative">
Dot
<span class="position-absolute top-0 start-100 translate-middle badge badge-dot border border-2 p-2 bg-danger"></span>
</button>
You can use position utilities with .badge
class like top-*
, start-*
, etc...
<button type="button" class="btn btn-label-primary text-nowrap d-inline-flex position-relative me-4">
Badge
<span class="position-absolute top-0 start-100 translate-middle badge bg-primary text-white">2</span>
</button>
<button type="button" class="btn btn-warning text-nowrap d-inline-flex position-relative me-4">
Label Badge
<span class="position-absolute top-0 start-100 translate-middle badge bg-label-warning border border-warning">2</span>
</button>
<button type="button" class="btn btn-label-info text-nowrap d-inline-flex position-relative me-4">
Pill
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-info text-white">2</span>
</button>
<button type="button" class="btn btn-label-danger text-nowrap d-inline-flex position-relative">
Dot
<span class="position-absolute top-0 start-100 translate-middle badge badge-dot border border-2 p-2 bg-danger"></span>
</button>
Using rounded-*
utilities for avatar & .badge-dot
class for notification
<div class="avatar d-inline-flex position-relative me-4">
<img src="assets/img/avatars/1.png" alt="Avatar">
<span class="position-absolute top-0 start-100 translate-middle badge badge-dot rounded-pill bg-primary"></span>
</div>
<div class="avatar d-inline-flex position-relative me-4">
<img src="assets/img/avatars/1.png" alt="Avatar" class="rounded-1">
<span class="position-absolute top-0 start-100 translate-middle badge badge-dot border rounded-pill bg-primary"></span>
</div>
<div class="avatar d-inline-flex position-relative me-4">
<img src="assets/img/avatars/1.png" alt="Avatar" class="rounded-2">
<span class="position-absolute top-0 start-100 translate-middle badge badge-dot p-2 rounded-pill bg-primary"></span>
</div>
<div class="avatar d-inline-flex position-relative me-4">
<img src="assets/img/avatars/1.png" alt="Avatar" class="rounded">
<span class="position-absolute top-0 start-100 translate-middle badge badge-dot rounded-pill bg-primary"></span>
</div>
<div class="avatar d-inline-flex position-relative me-4">
<img src="assets/img/avatars/1.png" alt="Avatar" class="rounded-3">
<span class="position-absolute top-0 start-100 translate-middle badge badge-dot p-2 border border-2 rounded-pill bg-primary"></span>
</div>
<div class="avatar d-inline-flex position-relative me-4">
<img src="assets/img/avatars/1.png" alt="Avatar" class="rounded-circle">
<span class="position-absolute top-0 start-100 translate-middle badge border rounded-pill bg-primary">9</span>
</div>