Badges
Default Badges
Use the badge
class to set a default badge.
HTML Preview
<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-info">Info</span>
<span class="badge bg-warning">Warning</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-dark">Dark</span>
<span class="badge bg-light text-body">Light</span>
Subtle Badges
Use the badge-subtle-
class with the below-mentioned variation to create a subtle badge.
HTML Preview
<span class="badge bg-primary-subtle text-primary">Primary</span>
<span class="badge bg-secondary-subtle text-secondary">Secondary</span>
<span class="badge bg-success-subtle text-success">Success</span>
<span class="badge bg-info-subtle text-info">Info</span>
<span class="badge bg-warning-subtle text-warning">Warning</span>
<span class="badge bg-danger-subtle text-danger">Danger</span>
<span class="badge bg-dark-subtle text-dark">Dark</span>
<span class="badge bg-light-subtle text-body">Light</span>
Outline Badges
Use the bg-body-secondary
, border
border-*
, text-*
class with the below-mentioned variation to create a badge with the outline.
HTML Preview
<span class="badge bg-body-secondary border border-primary text-primary">Primary</span>
<span class="badge bg-body-secondary border border-secondary text-secondary">Secondary</span>
<span class="badge bg-body-secondary border border-success text-success">Success</span>
<span class="badge bg-body-secondary border border-info text-info">Info</span>
<span class="badge bg-body-secondary border border-warning text-warning">Warning</span>
<span class="badge bg-body-secondary border border-danger text-danger">Danger</span>
<span class="badge bg-body-secondary border border-dark text-dark">Dark</span>
<span class="badge bg-body-secondary border border-light text-light">Light</span>
Rounded Pill Badges
Use the rounded-pill
class to make badges more rounded with a larger border-radius.
HTML Preview
<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-info">Info</span>
<span class="badge rounded-pill bg-warning">Warning</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-dark">Dark</span>
<span class="badge rounded-pill bg-light">Light</span>
Rounded Pill Badges with subtle effect
Use the rounded-pill badge-subtle-
class with the below-mentioned variation to create a badge more rounded with a soft background.
HTML Preview
<span class="badge rounded-pill bg-primary-subtle text-primary">Primary</span>
<span class="badge rounded-pill bg-secondary-subtle text-secondary">Secondary</span>
<span class="badge rounded-pill bg-success-subtle text-success">Success</span>
<span class="badge rounded-pill bg-info-subtle text-info">Info</span>
<span class="badge rounded-pill bg-warning-subtle text-warning">Warning</span>
<span class="badge rounded-pill bg-danger-subtle text-danger">Danger</span>
<span class="badge rounded-pill bg-dark-subtle text-dark">Dark</span>
<span class="badge rounded-pill bg-light-subtle text-body">Light</span>
Subtle Border Badges
Use the badge-border
and badge-subtle-
with below
mentioned modifier classes to make badges with border & subtle backgorund.
HTML Preview
<span class="badge bg-primary-subtle text-primary badge-border">Primary</span>
<span class="badge bg-secondary-subtle text-secondary badge-border">Secondary</span>
<span class="badge bg-success-subtle text-success badge-border">Success</span>
<span class="badge bg-info-subtle text-info badge-border">Info</span>
<span class="badge bg-warning-subtle text-warning badge-border">Warning</span>
<span class="badge bg-danger-subtle text-danger badge-border">Danger</span>
<span class="badge bg-dark-subtle text-dark badge-border">Dark</span>
<span class="badge bg-light-subtle text-body badge-border">Light</span>
Outline Pill Badges
Use the rounded-pill
class with the below-mentioned
variation to create a outline Pill badge.
HTML Preview
<span class="badge bg-body-secondary rounded-pill border border-primary text-primary">Primary</span>
<span class="badge bg-body-secondary rounded-pill border border-secondary text-secondary">Secondary</span>
<span class="badge bg-body-secondary rounded-pill border border-success text-success">Success</span>
<span class="badge bg-body-secondary rounded-pill border border-info text-info">Info</span>
<span class="badge bg-body-secondary rounded-pill border border-warning text-warning">Warning</span>
<span class="badge bg-body-secondary rounded-pill border border-danger text-danger">Danger</span>
<span class="badge bg-body-secondary rounded-pill border border-dark text-dark">Dark</span>
<span class="badge bg-body-secondary rounded-pill border border-light text-light">Light</span>
Label Badges
Use the badge-label
class to create a badge with the label.
HTML Preview
<span class="badge badge-label bg-primary"><i class="mdi mdi-circle-medium"></i> Primary</span>
<span class="badge badge-label bg-secondary"><i class="mdi mdi-circle-medium"></i> Secondary</span>
<span class="badge badge-label bg-success"><i class="mdi mdi-circle-medium"></i> Success</span>
<span class="badge badge-label bg-danger"><i class="mdi mdi-circle-medium"></i> Danger</span>
<span class="badge badge-label bg-warning"><i class="mdi mdi-circle-medium"></i> Warning</span>
<span class="badge badge-label bg-info"><i class="mdi mdi-circle-medium"></i> Info</span>
<span class="badge badge-label bg-dark"><i class="mdi mdi-circle-medium"></i> Dark</span>
\<span class="badge badge-label bg-light"><i class="mdi mdi-circle-medium"></i> Light</span>
Gradient Badges
Use the badge-gradient-*
class to create a gradient styled badge.
HTML Preview
<span class="badge badge-gradient-primary">Primary</span>
<span class="badge badge-gradient-secondary">Secondary</span>
<span class="badge badge-gradient-success">Success</span>
<span class="badge badge-gradient-danger">Danger</span>
<span class="badge badge-gradient-warning">Warning</span>
<span class="badge badge-gradient-info">Info</span>
<span class="badge badge-gradient-dark">Dark</span>
Button Position Badges
Use the below utilities to modify a badge and position it in the corner of a link or button.
HTML Preview
<button type="button" class="btn btn-primary position-relative"> Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-success">+99 <span class="visually-hidden">unread messages</span></span> </button>
<button type="button" class="btn btn-light position-relative"> Alerts <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-1"><span class="visually-hidden">unread messages</span></span> </button>
<button type="button" class="btn btn-primary position-relative p-0 avatar-xs rounded"> <span class="avatar-title bg-transparent"> <i class="bx bxs-envelope"></i> </span> <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-1"><span class="visually-hidden">unread messages</span></span> </button>
<button type="button" class="btn btn-light position-relative p-0 avatar-xs rounded-circle"> <span class="avatar-title bg-transparent text-reset"> <i class="bx bxs-bell"></i> </span> </button>
<button type="button" class="btn btn-light position-relative p-0 avatar-xs rounded-circle"> <span class="avatar-title bg-transparent text-reset"> <i class="bx bx-menu"></i> </span> <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-success p-1"><span class="visually-hidden">unread messages</span></span> </button>
Badges With Button
Badges can be used as part of buttons to provide a counter.
HTML Preview
<button type="button" class="btn btn-primary"> Notifications <span class="badge bg-success ms-1">4</span> </button>
<button type="button" class="btn btn-success"> Messages <span class="badge bg-danger ms-1">2</span> </button>
<button type="button" class="btn btn-outline-secondary"> Draft <span class="badge bg-success ms-1">2</span> </button>
Badges with Heading
Example of the badge used in the HTML Heading.
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
HTML Preview
<h1>Example heading <span class="badge bg-secondary align-middle">New</span></h1>
<h2>Example heading <span class="badge bg-secondary align-middle">New</span></h2>
<h3>Example heading <span class="badge bg-secondary align-middle">New</span></h3>
<h4>Example heading <span class="badge bg-secondary align-middle">New</span></h4>
<h5>Example heading <span class="badge bg-secondary align-middle">New</span></h5>
<h6>Example heading <span class="badge bg-secondary align-middle">New</span></h6>