Badges

Basic badge styling

Primary badge
Primary
Primary To use, add .badge-primary to the base .badge class
Secondary badge
Secondary
secondary To use, add .badge-secondary to the base .badge class
Info badge
Info
Info To use, add .badge-Info to the base .badge class
Success badge
Success
Success To use, add .badge-Success to the base .badge class
Danger badge
Danger
Danger To use, add .badge-Danger to the base .badge class
Warning badge
Warning
Warning To use, add .badge-Warning 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, add .badge-Transparent to the base .badge class

Pill

Text 7 +7 -7 10

Mono colors

Dark Grey Secondary

Sizing

Extra large Large Medium Small

Dot badges




Ring badges

.badge-ring applies to .badge.






Mayra Sibley

2 Hours

Hi there, I'm Jesse and you?
You

3 minutes

My name is Anne Clarc.
Mayra Sibley

40 seconds

Nice to meet you Anne.
How can i help you?