Badge
Background colors
Bootstrap offers button variants for semantic purposes and customization.
PrimarySecondarySuccessDangerWarningInfoLightDark
Pill badges
Use the .rounded-pill to make badges more rounded.
PrimarySecondarySuccessDangerWarningInfoLightDark
Subtle badge
Use .bg-*-subtle and .text-* classes for lightweight buttons with background colors.
PrimarySecondarySuccessDangerWarningInfoLightDark
Sizes
Fancy larger or smaller badge? Add .badge-lg or .badge-sm for additional sizes.
PrimarySecondarySuccess
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
WarningInfoLight Dark