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 ti tabler-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 ti tabler-brand-facebook"></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 colored border and text. 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 |
Badges with glow. Replace the default modifier classes with the
.bg-{value}.bg-glow.
<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 bg-{value} bg-glow"
|
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 .bg-{value}.bg-glow.
<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>
<p>
<span class="badge rounded-pill bg-primary bg-glow">Primary</span>
<span class="badge rounded-pill bg-secondary bg-glow">Secondary</span>
<span class="badge rounded-pill bg-success bg-glow">Success</span>
<span class="badge rounded-pill bg-danger bg-glow">Danger</span>
<span class="badge rounded-pill bg-warning bg-glow">Warning</span>
<span class="badge rounded-pill bg-info bg-glow">Info</span>
<span class="badge rounded-pill bg-dark bg-glow">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}.badge-center
<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>
</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>
</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} and .badge-outline-{value} style with this.
1
1
1
1
1
1
1
1
<div class="row row-bordered g-0">
<div class="col-xl-3 p-6">
<h6>Basic</h6>
<div class="demo-inline-spacing">
<p class="d-flex gap-2">
<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 ti tabler-star"></i></span>
</p>
<p class="d-flex gap-2">
<span class="badge badge-center text-bg-primary">1</span>
<span class="badge badge-center text-bg-secondary"><i class="icon-base ti tabler-star"></i></span>
</p>
</div>
</div>
<div class="col-xl-3 p-6">
<h6>Label</h6>
<div class="demo-inline-spacing">
<p class="d-flex gap-2">
<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 ti tabler-star"></i></span>
</p>
<p class="d-flex gap-2">
<span class="badge badge-center bg-label-primary">1</span>
<span class="badge badge-center bg-label-secondary"><i class="icon-base ti tabler-star"></i></span>
</p>
</div>
</div>
<div class="col-xl-3 p-6">
<h6>Outline</h6>
<div class="demo-inline-spacing">
<p class="d-flex gap-2">
<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 ti tabler-star"></i></span>
</p>
<p class="d-flex gap-2">
<span class="badge badge-center badge-outline-primary">1</span>
<span class="badge badge-center badge-outline-secondary"><i class="icon-base ti tabler-star"></i></span>
</p>
</div>
</div>
<div class="col-xl-3 p-6">
<h6>Glow</h6>
<div class="demo-inline-spacing">
<p class="d-flex gap-2">
<span class="badge badge-center rounded-pill bg-primary bg-glow">1</span>
<span class="badge badge-center rounded-pill bg-secondary bg-glow"><i class="icon-base ti tabler-star"></i></span>
</p>
<p class="d-flex gap-2">
<span class="badge badge-center bg-primary bg-glow">1</span>
<span class="badge badge-center bg-secondary bg-glow"><i class="icon-base ti tabler-star"></i></span>
</p>
</div>
</div>
</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} and .badge-outline-{value}.
<div class="card-body d-flex flex-wrap gap-2">
<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 badge-center rounded-pill bg-primary text-white">12</span>
</button>
<button type="button" class="btn btn-label-warning text-nowrap d-inline-flex position-relative me-4">
Label Badge
<span class="position-absolute top-0 start-100 translate-middle badge badge-center rounded-pill bg-warning text-white">12</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 badge-center rounded-pill bg-info text-white">12</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>
<button type="button" class="btn text-nowrap d-inline-block">
<span class="icon-base ti tabler-mail icon-sm"></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 ti tabler-clock icon-sm"></span>
<span class="badge rounded-pill bg-label-danger badge-notifications">5</span>
</button>
<button type="button" class="btn text-nowrap d-inline-block">
<span class="icon-base ti tabler-bell icon-sm"></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 ti tabler-brand-facebook icon-sm"></span>
<span class="badge rounded-pill bg-danger badge-dot badge-notifications"></span>
</button>
</div>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>