Documentation and examples for badges, our small count and labeling component.

Badges on Bootstrap

Use the .badge & .text-bg-* classes to make badges.

Default Primary Secondary Success Danger Warning Info Light Dark Purple

Use the .rounded-pill modifier class to make badges more rounded.

Default Primary Secondary Success Danger Warning Info Light Dark Purple

Using the .badge-outline-* to quickly create a bordered badges.

Primary Secondary Success Danger Warning Info Dark Purple

Use the .rounded-pill modifier class to make badges more rounded.

Primary Secondary Success Danger Warning Info Dark Purple

Use the .badge-soft--* modifier class to make badges lighten.

Primary Secondary Success Danger Warning Info Dark Purple

Use the .badge-soft--* modifier class to make badges lighten.

Primary Secondary Success Danger Warning Info Dark Purple

Using the .badge-label to quickly create a square based badges.

Default Primary Secondary Success Danger Warning Info Light Dark Purple

Using the .badge-square to quickly create a square based badges.

0 1 2 3 4 5 6 7 8 9

Using the .badge-circle to quickly create a circle based badges.

0 1 2 3 4 5 6 7 8 9

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

h1.Example heading New

h2.Example heading New

h3.Example heading New

h4.Example heading New

h5.Example heading New

h6.Example heading New