These Badges are responsive to the text size.
Example heading Primary
Example heading Secondary
Example heading Success
Example heading Danger
Example heading Warning
Example heading Info
Example heading Light
Example heading Dark
Example heading Primary
Example heading Secondary
Example heading Success
Example heading Danger
Example heading Warning
Example heading Info
Example heading Light
Example heading Dark
Example heading Primary
Example heading Secondary
Example heading Success
Example heading Danger
Example heading Warning
Example heading Info
Example heading Light
Example heading Dark
Badges can be used as part of links or buttons to provide a counter.
The Button and the Badge inside can be modified to your liking.
Add any of the below mentioned modifier classes to change the appearance of a badge.
Use 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.