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