Default Badges
Use the badge
class to set a default badge.
Subtle Badges
Use the badge-subtle-
class with the below-mentioned variation to create a subtle badge.
Outline Badges
Use the bg-body-secondary
, border
border-*
, text-*
class with the below-mentioned variation to create a badge with the outline.
Rounded Pill Badges
Use the rounded-pill
class to make badges more rounded with a larger border-radius.
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.
Subtle Border Badges
Use the badge-border
and badge-subtle-
with below
mentioned modifier classes to make badges with border & subtle backgorund.
Outline Pill Badges
Use the rounded-pill
class with the below-mentioned
variation to create a outline Pill badge.
Label Badges
Use the badge-label
class to create a badge with the label.
Gradient Badges
Use the badge-gradient-*
class to create a gradient styled badge.
Button Position Badges
Use the below utilities to modify a badge and position it in the corner of a link or button.
Badges With Button
Badges can be used as part of buttons to provide a counter.
Badges with Heading
Example of the badge used in the HTML Heading.