Badges
Default Badges
Badges scale to match the size of the immediate parent element by using relative font sizing and em units.
H1 Example New
H2 Example New
H3 Example New
H4 Example New
H5 Example New
H6 Example New
<h1>H1 Example <span class="badge badge-primary">New</span></h1>
<h2>H2 Example <span class="badge badge-secondary">New</span></h2>
<h3>H3 Example <span class="badge bg-success">New</span></h3>
<h4>H4 Example <span class="badge bg-info">New</span></h4>
<h5>H5 Example <span class="badge bg-warning">New</span></h5>
<h6>H6 Example <span class="badge bg-danger">New</span></h6>
Contextual Badges
Add any of the below mentioned modifier classes to change the appearance of a badge. Badge can be more contextual as well, just use the regular convention e.g. badge-*color, badge-*-light and badge-*-gradient
Default Badges
Using the .badge-*color class, you can have a variety of colored badges.
Light Badges
Using the .badge-*-light modifier class, you can have a light variation of badges.
Gradient Badges
Using the .badge-*-gradient modifier class, you can have a gradient color variation of badges.
<!-- default badges -->
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>
<!-- light badges -->
<span class="badge badge-primary-light">Primary</span>
<span class="badge badge-secondary-light">Secondary</span>
<span class="badge badge-success-light">Success</span>
<span class="badge badge-info-light">Info</span>
<span class="badge badge-warning-light">Warning</span>
<span class="badge badge-danger-light">Danger</span>
<!-- gradient badges -->
<span class="badge badge-primary-gradient">Primary</span>
<span class="badge badge-secondary-gradient">Secondary</span>
<span class="badge badge-success-gradient">Success</span>
<span class="badge badge-info-gradient">Info</span>
<span class="badge badge-warning-gradient">Warning</span>
<span class="badge badge-danger-gradient">Danger</span>
Pill Badges
Use the .badge-pill modifier class to make badges more rounded with a larger border-radius.
Default Pill Badges
Primary Secondary Success Info Warning DangerLight Pill Badges
Primary Secondary Success Info Warning DangerGradient Pill Badges
Primary Secondary Success Info Warning Danger<!-- default pill badges -->
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-danger">Danger</span>
<!-- light pill badges -->
<span class="badge badge-pill badge-primary-light">Primary</span>
<span class="badge badge-pill badge-secondary-light">Secondary</span>
<span class="badge badge-pill badge-success-light">Success</span>
<span class="badge badge-pill badge-info-light">Info</span>
<span class="badge badge-pill badge-warning-light">Warning</span>
<span class="badge badge-pill badge-danger-light">Danger</span>
<!-- gradient pill badges -->
<span class="badge badge-pill badge-primary-gradient">Primary</span>
<span class="badge badge-pill badge-secondary-gradient">Secondary</span>
<span class="badge badge-pill badge-success-gradient">Success</span>
<span class="badge badge-pill badge-info-gradient">Info</span>
<span class="badge badge-pill badge-warning-gradient">Warning</span>
<span class="badge badge-pill badge-danger-gradient">Danger</span>
Positioned Badges
Badges can be used as part of links or buttons to provide a counter and you can also use utilities to modify a .badge and position it in the corner of a link or button. You can also replace the .badge class with a few more utilities for a more generic indicator.
<button type="button" class="btn btn-success">
Notifications <span class="badge bg-light-grey text-dark ml-5">4</span>
</button>
<button type="button" class="btn btn-info position-relative">
Inbox
<span class="position-absolute top-0 start-100 translate-middle badge badge-pill badge-danger b-1 border-light">
99+
</span>
</button>
<button type="button" class="btn btn-primary position-relative">
Profile
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger b-1 border-light rounded-circle"></span>
</button>