CoreUI Badge has been created as an extension of Bootstrap Badge. Badge is delivered with some new features, variants, and unique design that matches CoreUI Design System requirements.

For more information please visit our official documentation.
Badges

Bootstrap badge scale to suit the size of the parent element by using relative font sizing and em units.

Example headingNew

Example headingNew

Example headingNew

Example headingNew

Example headingNew
Example headingNew

Badges can be used as part of links or buttons to provide a counter.

BadgesContextual variations

Add any of the below-mentioned classes to modify the presentation of a badge. Please note that when using Bootstrap’s default .bg-light, you’ll likely need a text color utility like .text-dark for proper styling. This is because background utilities do not set anything but background-color.

Primary Secondary Success Danger Warning Info Light Dark
BadgesPill badges

Apply the .rounded-pill modifier class to make badges rounded.

Primary Secondary Success Danger Warning Info Light Dark