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.

Primary Secondary Success Info Warning Danger
Light Badges

Using the .badge-*-light modifier class, you can have a light variation of badges.

Primary Secondary Success Info Warning Danger
Gradient Badges

Using the .badge-*-gradient modifier class, you can have a gradient color variation of badges.

Primary Secondary Success Info Warning Danger
<!-- 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 Danger
Light Pill Badges
Primary Secondary Success Info Warning Danger
Gradient 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>
LAYOUTS
Default Layout
Layout Right Side-Nav
Layout Detached Left Side-Nav
Layout Detached Right Side-Nav