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 text-bg-secondary">New</span></h1>
<h2>Example heading <span class="badge text-bg-secondary">New</span></h2>
<h3>Example heading <span class="badge text-bg-secondary">New</span></h3>
<h4>Example heading <span class="badge text-bg-secondary">New</span></h4>
<h5>Example heading <span class="badge text-bg-secondary">New</span></h5>
<h6>Example heading <span class="badge text-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">
Message
<span class="badge bg-white text-primary ms-1">4</span>
<span class="visually-hidden">unread messages</span>
</button>
<button type="button" class="btn btn-secondary text-nowrap d-inline-flex position-relative">
Badge
<span
class="position-absolute top-0 start-100 badge text-bg-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="icon-base bx bx-bell"></span>
<span class="badge rounded-pill text-bg-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="icon-base bx bxl-facebook-square"></span>
<span class="badge rounded-pill bg-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 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-dark">Dark</span>
Class | Value |
---|---|
class="badge text-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 |
Badges with outline border color. Replace the default modifier classes with the
.badge-outline-{value}
.
<span class="badge badge-outline-primary">Primary</span>
<span class="badge badge-outline-secondary">Secondary</span>
<span class="badge badge-outline-success">Success</span>
<span class="badge badge-outline-danger">Danger</span>
<span class="badge badge-outline-warning">Warning</span>
<span class="badge badge-outline-info">Info</span>
<span class="badge badge-outline-dark">Dark</span>
Class | Value |
---|---|
class="badge badge-outline-{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}
or .badge-outline-{value}
.
<p>
<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-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>
<p>
<span class="badge rounded-pill badge-outline-primary">Primary</span>
<span class="badge rounded-pill badge-outline-secondary">Secondary</span>
<span class="badge rounded-pill badge-outline-success">Success</span>
<span class="badge rounded-pill badge-outline-danger">Danger</span>
<span class="badge rounded-pill badge-outline-warning">Warning</span>
<span class="badge rounded-pill badge-outline-info">Info</span>
<span class="badge rounded-pill badge-outline-dark">Dark</span>
</p>
Using the contextual .text-bg-{value}
classes inside an <a>
element quickly provide actionable badges.
<a href="javascript:void(0)"><span class="badge text-bg-primary">Primary</span></a>
<a href="javascript:void(0)"><span class="badge text-bg-secondary">Secondary</span></a>
<a href="javascript:void(0)"><span class="badge text-bg-success">Success</span></a>
<a href="javascript:void(0)"><span class="badge text-bg-danger">Danger</span></a>
<a href="javascript:void(0)"><span class="badge text-bg-warning">Warning</span></a>
<a href="javascript:void(0)"><span class="badge text-bg-info">Info</span></a>
<a href="javascript:void(0)"><span class="badge text-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}
and .badge-outline-{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 text-bg-secondary rounded-pill ms-1">4</span>
</button>
<button type="button" class="btn btn-primary me-4">
Text
<span class="badge badge-outline-success 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 text-bg-secondary rounded-pill ms-1">4</span>
</button>
<button type="button" class="btn btn-label-primary me-4">
Text
<span class="badge badge-outline-success 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>
<button type="button" class="btn btn-outline-primary me-4">
Text
<span class="badge badge-outline-success 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}
and .badge-outline-{value}
style with this.
1
1
1
1
1
1
<div class="row row-bordered g-0">
<div class="col-xl-4 p-6">
<h6>Basic</h6>
<div class="demo-inline-spacing">
<p>
<span class="badge badge-center rounded-pill text-bg-primary">1</span>
<span class="badge badge-center rounded-pill text-bg-secondary"><i class='icon-base bx bx-star'></i></span>
</p>
<p>
<span class="badge badge-center text-bg-primary">1</span>
<span class="badge badge-center text-bg-secondary"><i class='icon-base bx bx-star'></i></span>
</p>
</div>
</div>
<div class="col-xl-4 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='icon-base 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='icon-base bx bx-star'></i></span>
</p>
</div>
</div>
<div class="col-xl-4 p-6">
<h6>Outline</h6>
<div class="demo-inline-spacing">
<p>
<span class="badge badge-center rounded-pill badge-outline-primary">1</span>
<span class="badge badge-center rounded-pill badge-outline-secondary"><i class='icon-base bx bx-star'></i></span>
</p>
<p>
<span class="badge badge-center badge-outline-primary">1</span>
<span class="badge badge-center badge-outline-secondary"><i class='icon-base bx bx-star'></i></span>
</p>
</div>
</div>
</div>
Class | Value |
---|---|
class="badge badge-center text-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}
and .badge-outline-{value}
.
<button type="button" class="btn btn-secondary text-nowrap d-inline-flex position-relative">
Badge
<span class="position-absolute top-0 start-100 badge badge-center badge-notifications text-bg-primary"
>12</span
>
</button>
<button type="button" class="btn btn-secondary text-nowrap d-inline-flex position-relative">
Label Badge
<span class="position-absolute top-0 start-100 badge badge-center badge-notifications bg-label-warning"
>12</span
>
</button>
<button type="button" class="btn btn-secondary text-nowrap d-inline-flex position-relative">
Pill
<span
class="position-absolute top-0 start-100 badge badge-center badge-notifications text-bg-info rounded-pill"
>12</span
>
</button>
<button type="button" class="btn btn-secondary text-nowrap d-inline-flex position-relative">
Dot
<span
class="position-absolute top-0 start-100 badge badge-dot badge-notifications border border-2 p-1 bg-danger"></span>
</button>
<button type="button" class="btn text-nowrap d-inline-block">
<span class="icon-base bx icon-xs bx-envelope"></span>
<span class="badge text-bg-primary badge-notifications">6</span>
</button>
<button type="button" class="btn text-nowrap d-inline-block">
<span class="icon-base bx bxl-twitter"></span>
<span class="badge rounded-pill text-bg-info badge-notifications">5</span>
</button>
<button type="button" class="btn text-nowrap d-inline-block">
<span class="icon-base bx icon-xs bx-bell"></span>
<span class="badge rounded-pill text-bg-danger badge-notifications">10</span>
</button>
<button type="button" class="btn text-nowrap d-inline-block">
<span class="icon-base 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-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>