Badge
Small count and labeling component.
Basic example
Badges scale to match the size of the immediate parent element by using relative font sizing and em units.
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Positioned example
Use utilities to modify a .badge and position it in the corner of a link or button.
Pill examples
Use the .rounded-pill utility class to make badges more rounded with a larger border-radius.
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Faded examples Custom
Use the .bg-${color}-faded class for a faded badge variant
Primary
Secondary
Success
Danger
Warning
Info
Dark