Badges
Normal Badges
Add class .badge-{color} with .badge
| Item | Label |
|---|---|
| Primary label |
Primary
|
| Info label |
Info
|
| Danger label |
Danger
|
| Success label |
Success
|
| Warning label |
Warning
|
Badge Pills
Add class .badge-pill
| Item | Label |
|---|---|
| Primary label |
Primary
|
| Info label |
Info
|
| Danger label |
Danger
|
| Success label |
Success
|
| Warning label |
Warning
|
Badge Outlined Variations
Add class .badge-outline-*
| Normal | Rounded |
|---|---|
|
Primary
|
Primary
|
|
Info
|
Info
|
|
Danger
|
Danger
|
|
Success
|
Success
|
|
Warning
|
Warning
|
Badge Outlined Variations
| Item | Label |
|---|---|
| Rounded Primary |
2
|
| Rounded Info |
5
|
| Rounded Danger |
1
|
| Rounded Success |
9
|
| Rounded Warning |
4
|
Badge Variations
| Item | Label |
|---|---|
| Rounded Primary |
2
|
| Rounded Info |
5
|
| Rounded Danger |
1
|
| Rounded Success |
9
|
| Rounded Warning |
4
|
Badge With Icons
| Item | Label |
|---|---|
| Icon Badge |
|
| Outlined Icons |
|
| Icon With Text |
12
|
| Icon With Text |
12
|
| Icon Badge |
|
Gradient Badges
Add class .badge-gradient-{color}
| Item | Label |
|---|---|
| Primary label |
Primary
|
| Secondary label |
Secondary
|
| Info label |
Info
|
| Danger label |
Danger
|
| Success label |
Success
|
| Warning label |
Warning
|
Gradient Rounded Badges
Add class .badge-pill
| Item | Label |
|---|---|
| Primary label |
Primary
|
| Secondary label |
Secondary
|
| Info label |
Info
|
| Danger label |
Danger
|
| Success label |
Success
|
| Warning label |
Warning
|