keyboard_double_arrow_left
help Help & getting started
  1. Home
  2. Badge

Badge.

Documentation and examples for badges, our small count and labeling component. Click here

Background colors

Bootstrap provides a variety of colors for badges: .bg-primary, .bg-secondary, .bg-success, .bg-danger, .bg-warning, .bg-info, etc.

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>

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>

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 rounded-pill bg-secondary">99+
    <span class="visually-hidden">unread messages</span>
  </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-success border border-light rounded-circle">
    <span class="visually-hidden">New alerts</span>
  </span>
</button>

Buttons

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


<button type="button" class="btn btn-primary">Notifications <span class="badge text-bg-light">1</span></button>
<button type="button" class="btn btn-secondary">Notifications <span class="badge text-bg-light">2</span></button>
<button type="button" class="btn btn-success">Notifications <span class="badge text-bg-light">3</span></button>
<button type="button" class="btn btn-danger">Notifications <span class="badge text-bg-light">4</span></button>

Badges Size

Default Bootstrap Badges with button

Primary Primary Secondary Danger Warning 

<span class="badge badge-xs light badge-primary">Primary</span>
<span class="badge badge-sm light badge-primary">Primary</span>
<span class="badge light badge-secondary">Secondary</span>
<span class="badge badge-lg light badge-danger">Danger</span>
<span class="badge badge-xl light badge-warning">Warning</span>

Badges Light

Default Bootstrap Badges with light

Primary Secondary Success Danger Warning Info Light Dark 

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

Outline Badge

add .badge-outline-* to change the style

Rounded Rounded Rounded Rounded Rounded Rounded Rounded Rounded 

<span class="badge badge-outline-primary">Rounded</span>
<span class="badge badge-outline-secondary">Rounded</span>
<span class="badge badge-outline-success">Rounded</span>
<span class="badge badge-outline-danger">Rounded</span>
<span class="badge badge-outline-warning">Rounded</span>
<span class="badge badge-outline-info">Rounded</span>
<span class="badge badge-outline-light">Rounded</span>
<span class="badge badge-outline-dark">Rounded</span>

Circle Badge with Outline

add .rounded-pill to change the style

1 2 3 4 5 6 7 8 

<span class="badge rounded-pill badge-outline-primary">1</span>
<span class="badge rounded-pill badge-outline-secondary">2</span>
<span class="badge rounded-pill badge-outline-success">3</span>
<span class="badge rounded-pill badge-outline-danger">4</span>
<span class="badge rounded-pill badge-outline-warning">5</span>
<span class="badge rounded-pill badge-outline-info">6</span>
<span class="badge rounded-pill badge-outline-light">7</span>
<span class="badge rounded-pill badge-outline-dark">8</span>

Circle Badge

add .rounded-pill to change the style

1 2 3 4 5 6 7 8 

<span class="badge rounded-pill text-bg-primary">1</span>
<span class="badge rounded-pill text-bg-secondary">2</span>
<span class="badge rounded-pill text-bg-success">3</span>
<span class="badge rounded-pill text-bg-danger">4</span>
<span class="badge rounded-pill text-bg-warning">5</span>
<span class="badge rounded-pill text-bg-info">6</span>
<span class="badge rounded-pill text-bg-light">7</span>
<span class="badge rounded-pill text-bg-dark">8</span>