Badges
Build vertically collapsing accordions in combination with bootstrap Collapse JavaScript plugin
Background colors
Set a background-color with contrasting foreground color with our .text-bg-{color} helpers. Previously it was required to manually pair your choice of .text-{color} and .bg-{color} utilities for styling, which you still may use if you prefer.
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Light
- Dark
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Light
- Dark
Pill badges
Use the .rounded-pill utility class to make badges more rounded with a larger border-radius.
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Light
- Dark
Positioned
Use utilities to modify a .badge and position it in the corner of a link or button.
Buttons
Badges can be used as part of links or buttons to provide a counter.
