Badges .badge

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

heading 1 new

heading 2 new

heading 3 new

heading 4 new

heading 5 new
heading 6 new

Badge Animation .hertbit

Use the .hertbit modifier class to make badges Animated

1 2 3 4 5 6 7 8

Contextual variations

Add any of the below mentioned modifier classes to change the appearance of a badge. eg ( .badge-primary)

Primary Secondary Success Danger Warning Info Light Dark

Pill badges

Use the .badge-pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding)

Primary Secondary Success Danger Warning Info Light Dark

Boxed badges

Use the .badge-boxed modifier class to make badges Boxed-Badges

Primary Secondary Success Danger Warning Info Light Dark