Badge

This Here Is A Badge

Badge

Badges are used to add additional information to any content.

Use the .badge class together with a contextual class (like .badge-secondary) within <span> elements to create rectangular badges. Note that badges scale to match the size of the parent element (if any).

From W3Schools.com

Default

Default badges with different backgrounds.

Primary Secondary Success Danger Warning Info Light Dark

Pill Badges

Pill badges with different backgrounds.

Primary Secondary Success Danger Warning Info Light Dark

Numbered

Numbered badges with different backgrounds.

1 2 3 4 5 6 7 8

Numbered Pill Badges

Numbered pill badges with different backgrounds.

1 2 3 4 5 6 7 8

Outline

Outline badges with different backgrounds.

Primary Secondary Success Danger Warning Info Light Dark

Outline Pill Badges

Outline pill badges with different backgrounds.

Primary Secondary Success Danger Warning Info Light Dark

Light

Badges with light backgrounds.

Primary Secondary Success Danger Warning Info Light Dark Link

Light Pills

Badges with light backgrounds.

Primary Secondary Success Danger Warning Info Light Dark Link

Bullet Badges

Primary Secondary Success Danger Warning Info Light Dark