Badges
These modular elements can be readily used and customized in every layout across pages.
For detail documentation, View Badge on Bootstrap
Contextual variations
Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
<span class="badge my-1 badge-primary">Primary</span>
<span class="badge my-1 badge-secondary">Secondary</span>
<span class="badge my-1 badge-success">Success</span>
<span class="badge my-1 badge-info">Info</span>
<span class="badge my-1 badge-warning">Warning</span>
<span class="badge my-1 badge-danger">Danger</span>
<span class="badge my-1 badge-light">Light</span>
<span class="badge my-1 badge-dark">Dark</span>Pill badges
Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
<span class="badge badge-pill my-1 badge-primary">Primary</span>
<span class="badge badge-pill my-1 badge-secondary">Secondary</span>
<span class="badge badge-pill my-1 badge-success">Success</span>
<span class="badge badge-pill my-1 badge-info">Info</span>
<span class="badge badge-pill my-1 badge-warning">Warning</span>
<span class="badge badge-pill my-1 badge-danger">Danger</span>
<span class="badge badge-pill my-1 badge-light">Light</span>
<span class="badge badge-pill my-1 badge-dark">Dark</span>Soft badges
Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
<span class="badge my-1 badge-soft-primary">Primary</span>
<span class="badge my-1 badge-soft-secondary">Secondary</span>
<span class="badge my-1 badge-soft-success">Success</span>
<span class="badge my-1 badge-soft-info">Info</span>
<span class="badge my-1 badge-soft-warning">Warning</span>
<span class="badge my-1 badge-soft-danger">Danger</span>
<span class="badge my-1 badge-soft-light">Light</span>
<span class="badge my-1 badge-soft-dark">Dark</span>Soft pill badges
Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
<span class="badge badge-pill my-1 badge-soft-primary">Primary</span>
<span class="badge badge-pill my-1 badge-soft-secondary">Secondary</span>
<span class="badge badge-pill my-1 badge-soft-success">Success</span>
<span class="badge badge-pill my-1 badge-soft-info">Info</span>
<span class="badge badge-pill my-1 badge-soft-warning">Warning</span>
<span class="badge badge-pill my-1 badge-soft-danger">Danger</span>
<span class="badge badge-pill my-1 badge-soft-light">Light</span>
<span class="badge badge-pill my-1 badge-soft-dark">Dark</span>