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 badge-md bg-primary">Primary</span>