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 |
|---|---|
.bg-{state} | Use {state} as primary, secondary, success, info, warning, danger, dark, gray, light |
.bg-outline-{state} | Same as above {state} |
.rounded-pill | Use with .rounded class rounded badge style. |
Code Example
<span class="badge bg-primary">...</span><span class="badge bg-outline-primary">...</span>
Code Example
<span class="badge rounded-pill bg-primary">...</span><span class="badge rounded-pill bg-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 bg-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 bg-primary">Primary</span><span class="badge badge-dim rounded-pill bg-primary">Primary</span>
Code Example
<span class="badge badge-dim bg-outline-primary">Primary</span><span class="badge badge-dim rounded-pill bg-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 bg-primary">Primary</span>
Code Example
<span class="badge rounded-pill bg-md bg-primary">Primary</span>
