Example with Variations
Add any of the below mentioned modifier classes to change the appearance of a badge.
Default Style
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Dark
- Gray
- Light
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Dark
- Gray
- Light
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Dark
- Gray
- Light
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Dark
- Gray
- Light
| Class Reference | Details |
|---|---|
.badge-{state} |
Use {state} as primary, secondary, success, info, warning, danger, dark, gray, light |
.badge-outline-{state} |
Same as above {state} |
.badge-pill |
Use with .badge class rounded badge style. |
Code Example
<span class="badge badge-primary">...</span> <span class="badge badge-outline-primary">...</span>
Code Example
<span class="badge badge-pill badge-primary">...</span> <span class="badge badge-pill badge-outline-primary">...</span>
Dot Style
Use the .badge-dot modifier class to make dot style badges.
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Dark
- Gray
- Light
Code Example
<span class="badge badge-dot badge-primary">Primary</span>
Dim/Pale Style
Use the .badge-dim modifier class to make soft light / pale color badges.
Pale Style
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Dark
- Gray
- Light
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Dark
- Gray
- Light
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Dark
- Gray
- Light
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Dark
- Gray
- Light
Code Example
<span class="badge badge-dim badge-primary">Primary</span> <span class="badge badge-dim badge-pill badge-primary">Primary</span>
Code Example
<span class="badge badge-dim badge-outline-primary">Primary</span> <span class="badge badge-dim badge-pill badge-outline-primary">Primary</span>
Badge Size
Use the .badge-{size} modifier class to control badge sizes.
Default Style
- Primary
- Primary
- Primary
- Primary
- Primary
- Primary
- Primary
- Primary
- Primary
- Primary
| Class Reference | Details |
|---|---|
.badge-{size} |
Use {size} as sm, md, lg, xl |
Code Example
<span class="badge badge-md badge-primary">Primary</span>
Code Example
<span class="badge badge-pill badge-md badge-primary">Primary</span>