Badges

Examples

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

Badges on Bootstrap

Basic Badges

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

Default Primary Secondary Success Danger Warning Info Light Dark Purple

Basic Pill Badges

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

Default Primary Secondary Success Danger Warning Info Light Dark Purple

Outline Badges

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

Primary Secondary Success Danger Warning Info Dark Purple

Outline Pill Badges

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

Primary Secondary Success Danger Warning Info Dark Purple

Lighten Badges

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

Primary Secondary Success Danger Warning Info Dark Purple

Lighten Pill Badges

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

Primary Secondary Success Danger Warning Info Dark Purple

Label Badges

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

Default Primary Secondary Success Danger Warning Info Light Dark Purple

Square Badges

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

0 1 2 3 4 5 6 7 8 9

Circle Badges

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

0 1 2 3 4 5 6 7 8 9

Positioned

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

Headings with Badges

h1.Example heading New

h2.Example heading New

h3.Example heading New

h4.Example heading New

h5.Example heading New

h6.Example heading New