Badges .badge

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

heading 1 new

heading 2 new

heading 3 new

heading 4 new

heading 5 new
heading 6 new

Badge Animation .hertbit

Use the .hertbitmodifier class to make badges Animated

12345678

Contextual variations

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

PrimarySecondarySuccessDangerWarningInfoLightDark

Pill badges

Use the .badge-pillmodifier class to make badges more rounded (with a larger border-radiusand additional horizontal padding)

PrimarySecondarySuccessDangerWarningInfoLightDark

Boxed badges

Use the .badge-boxedmodifier class to make badges Boxed-Badges

PrimarySecondarySuccessDangerWarningInfoLightDark