Badges

Badges, our small count and labeling component.

Background colors

Set a background-color with contrasting foreground color with our .text-bg-{color} helpers.

Primary Secondary Success Danger Warning Info Light Dark

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-bg-dark">Dark</span>

Soft styleExclusive

Use the .text-bg-*-soft class to create softer background color.

Primary Secondary Success Danger Warning Info Light Dark

<span class="badge text-bg-primary-soft">Primary</span>
<span class="badge text-bg-secondary-soft">Secondary</span>
<span class="badge text-bg-success-soft">Success</span>
<span class="badge text-bg-danger-soft">Danger</span>
<span class="badge text-bg-warning-soft">Warning</span>
<span class="badge text-bg-info-soft">Info</span>
<span class="badge text-bg-light-soft">Light</span>
<span class="badge text-bg-dark-soft">Dark</span>

Pill badges

Use the .rounded-pill utility class to make badges more rounded with a larger border-radius.

Primary Secondary Success Danger Warning Info Light Dark

<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>

Headings

Badges scale to match the size of the immediate parent element by using relative font sizing and % units.

Example heading New

<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>

Buttons

Badges can be used as part of links or buttons to provide a counter.

<button type="button" class="btn btn-dark">
    Notifications <span class="badge text-bg-light">4</span>
</button>

Positioned

Use utilities to modify a .badge and position it in the corner of a link or button.

<button type="button" class="btn btn-primary position-relative">
    Inbox
    <span class="position-absolute top-0 start-100 translate-middle badge bg-danger">
        99+
        <span class="visually-hidden">unread messages</span>
    </span>
</button>