Sizes

Size of the badge changes with its font size.
The default font size value is 12px

Font 20px Font 18px Font 16px Font 14px Font 12px Font 10px

Colors

Primary Secondary Success Danger Warning Light White Dark

With button

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

Links & buttons

You can use badges as a links or buttons.

Links:

Primary Secondary Success Danger Warning Light White Dark

Buttons:

Pill badges

Primary Secondary Success Danger Warning Light White Dark

Square badges

Size of the squared badge is equal to its font size multiplied by 2.
The default font size value is 16px

1 2 3 4 5 6 7 8

Badge with icon

Disable transparency

You can disable badge transparency using .bs-badge-solid class.

Primary Secondary Success Danger Warning Light White Dark

Label badge

Primary Secondary Success Danger Warning Light White Dark