Badges scale to match the size of the immediate parent element by using
relative font sizing and em units.
Badges can be used as part of buttons to provide a counter.
Badges can be used as part of buttons to provide a counter.
Badges can be used as part of buttons to provide a counter.
Add any of the below mentioned modifier classes to change the appearance of a badge.
Primary Secondary Success Danger Warning Info Light DarkUse the .badge-pill modifier class to make badges
more rounded (with a larger border-radius and additional
horizontal padding). Useful if you miss the badges from v3.
Using the contextual .badge-* classes on an
<a> element quickly provide actionable badges
with hover and focus states.
Add any of the below mentioned modifier classes to change the appearance of a badge.
Primary Secondary Success Danger Warning Info Light DarkUse the .badge-pill modifier class to make badges
more rounded (with a larger border-radius and additional
horizontal padding). Useful if you miss the badges from v3.
Using the contextual .badge-* classes on an
<a> element quickly provide actionable badges
with hover and focus states.