{{> (config config.partials.head) title=config.defaultPageTitle }} {{> (config config.partials.navbar) configClassList=config.classes.navbar classList="" }}
{{> content/breadcrumbs page="Badge"}}

Badge

Small count and labeling component.

Basic example

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
Positioned example

Use utilities to modify a .badge and position it in the corner of a link or button.

Pill examples

Use the .rounded-pill utility class to make badges more rounded with a larger border-radius.

Primary Secondary Success Danger Warning Info Light Dark
Faded examples Custom

Use the .bg-${color}-faded class for a faded badge variant

Primary Secondary Success Danger Warning Info Dark
{{> (config config.partials.footer) configClassList=config.classes.footer classList="" }}
{{> aside/aside }} {{> footer/scripts }}