| 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.