Overview
Badges scale so that their height matches the font-size of their immediate parent element by using relative font sizing and em units.
Regular Badges
Use .badge class along with a .badge-{theme-color} class to create badges base on our
Theme Colors.
Primary
Secondary
Tertiary
Dark
Success
Warning
Danger
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-tertiary">Tertiary</span>
<span class="badge badge-dark">Dark</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>Text Badges
Add a .badge-text-{theme-color} class to your badge for a text
variant that maintains the same spacing, just without the background color.
Primary
Secondary
Dark
Success
Danger
<span class="badge badge-text-primary">Primary</span>
<span class="badge badge-text-secondary">Secondary</span>
<span class="badge badge-text-dark">Dark</span>
<span class="badge badge-text-success">Success</span>
<span class="badge badge-text-danger">Danger</span>Counter Badges
Use the .badge-pill modifier class to make badges more rounded
1
2
3
4
5
6
7
<div>
<span class="badge badge-pill badge-primary">1</span>
<span class="badge badge-pill badge-secondary">2</span>
<span class="badge badge-pill badge-tertiary">3</span>
<span class="badge badge-pill badge-dark">4</span>
<span class="badge badge-pill badge-success">5</span>
<span class="badge badge-pill badge-danger">6</span>
<span class="badge badge-pill badge-warning">7</span>
</div>Badges in other elements
Badges can be inserted into other elements. Just be sure to utilize our utility classes to position your badges appropriately.
- List with Badge 14
- List with Text Badge 14
<button type="button" class="btn btn-outline-primary">
Button <span class="badge badge-primary">9</span>
<span class="sr-only">unread messages</span>
</button>
<button type="button" class="btn btn-primary">
Button <span class="badge badge-text-tertiary">9</span>
<span class="sr-only">unread messages</span>
</button>
<ul class="mt-3 list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
List with Badge
<span class="badge badge-primary badge-pill">14</span>
</li>
</ul>
<ul class="mt-3 list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
List with Text Badge
<span class="badge badge-text-primary badge-pill">14</span>
</li>
</ul>Badge Sizes
By default Badges scale according to their immediate parent element but there are also large and small options available.
Small
Default
Large
<span class="badge badge-sm badge-primary">Small</span>
<span class="badge badge-primary">Default</span>
<span class="badge badge-lg badge-primary">Large</span>