Badges
Default Badges
Use the Badge tag to set a default badge.
Soft Badges
Use the bg-*-subtle text-* class with the
below-mentioned variation to create a softer badge.
Outline Badges
Use the 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 soft effect
Use the rounded-pill bg-*-subtle text-*
class with the below-mentioned variation to create a
badge more rounded with a soft background.
Soft Border Badges
Use the badge-border and
bg-*-subtle text-* with below mentioned
modifier classes to make badges with border & soft background.
Outline Pill Badges
Use the rounded-pill border, border-* text-* 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.
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New