Badges

Basic badge styling
Primary badge Primary Primary To use, add .badge-primary to the base .badge class
Secondary badge Secondary Primary To use, add .badge-secondary to the base .badge class
Danger badge Danger Danger To use, add .badge-danger to the base .badge class
Success badge Success Success To use, add .badge-success to the base .badge class
Warning badge Warning Warning To use, add .badge-warning to the base .badge class
Info badge Info Info To use, add .badge-info to the base .badge class
Light badge Light Light To use, add .badge-light to the base .badge class
Dark badge Dark Dark To use, add .badge-dark to the base .badge class
Transparent badge Transparent Transparent To use, remove background color class from the .badge container
Custom badge color Purple Add one of available custom background colors. To use, add .bg-* color class to the .badge element

Pill

Text 7 +7 -7 10 +10 -10

More colors

Purple Pink Cyan Yellow brown Dark Grey Secondary

Sizing

Extra large Large Medium Small

Dot badges




Ring badges

.badge-ring applies to .badge.