| Class | Result |
|---|---|
| .badge | the base badge class to setup structure |
| .badge-primary | primary theme color |
| .badge-secondary | secondary theme color |
| .badge-success | success theme color |
| .badge-info | info theme color |
| .badge-warning | warning theme color |
| .badge-danger | danger theme color |
| .badge-light | light theme color |
| .badge-dark | dark theme color |
Use the Background Color, Text Color, and Border Radius classes to style badges.
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark rounded-full">Light</span>
<span class="badge bg-dark rounded-full">Dark</span>
Primary Secondary Success Danger Warning Info Light Dark
Input
<span class="badge badge-primary">Badge</span>
Output
<table class="badge badge-primary" align="left" role="presentation" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="line-height: 1; font-size: 75%; display: inline-block; font-weight: 700; white-space: nowrap; border-radius: 4px; margin: 0; padding: 4px 6.4px;" align="center" valign="baseline">
<span>Badge</span>
</td>
</tr>
</tbody>
</table>