Badges

Basic Badges

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

Default Primary Secondary Success Danger Warning Info Light Dark

Basic Pill Badges

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

Default Primary Secondary Success Danger Warning Info Light Dark

Outline Badges

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

Primary Secondary Success Danger Warning Info Dark

Outline Pill Badges

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

Primary Secondary Success Danger Warning Info Dark

Lighten Badges

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

Primary Secondary Success Danger Warning Info Dark

Lighten Pill Badges

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

Primary Secondary Success Danger Warning Info Dark

Label Badges

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

Default Primary Secondary Success Danger Warning Info Light Dark

Square Badges

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

0 1 2 3 4 5 6 7 8

Circle Badges

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

0 1 2 3 4 5 6 7 8

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