Badge
Background colors
Bootstrap offers button variants for semantic purposes and customization.
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Pill badges
Use the .rounded-pill to make badges more rounded.
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Subtle badge
Use .bg-*-subtle and .text-* classes for lightweight buttons with background colors.
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Sizes
Fancy larger or smaller badge? Add .badge-lg or .badge-sm for additional sizes.
Primary
Secondary
Success
Positioned
Use utilities to modify a .badge and position it in the corner of a link or button.
Badge with Avatar
Displays user identity with avatar and role.
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark