Badges

A small count and labeling component.

Bootstrap documentation


Primary Secondary Success Danger Warning Info Light Dark Primary Secondary Success Danger Warning Info Light Dark

Soft

Client only

Creates a soft variant of a corresponding contextual badge variation. These can be used exactly like Bootstrap's core badges, including modiying classes like .badge-pill, as an <a> itself, or inside of <button> or <a> elements.

Primary Secondary Success Info Warning Danger Light Dark

Sizing

Client only

Create badges of a bigger size with a .badge-lg modifier.

Large Standard

Circle

Client only

Turn any badge into a circle with a .badge-rounded-cirle modifier.


Float

Client only

Position any badge absolutely inside or outside an element with .badge-float-inside and .badge-float-outside modifiers.

Inside

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, sed modi officiis asperiores ex sapiente beatae earum, iusto labore! Fugiat officia iure mollitia, aut, error provident dolorum voluptates deleniti consectetur?

Outside

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, sed modi officiis asperiores ex sapiente beatae earum, iusto labore! Fugiat officia iure mollitia, aut, error provident dolorum voluptates deleniti consectetur?