Badge
Headings with badge
H1 heading with badge Badge
H2 heading with badge Badge
H3 heading with badge Badge
H4 heading with badge Badge
H5 heading with badge Badge
H6 heading with badge Badge
<h1>H1 heading with badge <span class="badge bg-secondary">Badge</span></h1>
<h2>H2 heading with badge <span class="badge bg-secondary">Badge</span></h2>
<h3>H3 heading with badge <span class="badge bg-secondary">Badge</span></h3>
<h4>H4 heading with badge <span class="badge bg-secondary">Badge</span></h4>
<h5>H5 heading with badge <span class="badge bg-secondary">Badge</span></h5>
<h6>H6 heading with badge <span class="badge bg-secondary">Badge</span></h6><h1>H1 heading with badge <span class="badge bg-secondary">Badge</span></h1>
<h2>H2 heading with badge <span class="badge bg-secondary">Badge</span></h2>
<h3>H3 heading with badge <span class="badge bg-secondary">Badge</span></h3>
<h4>H4 heading with badge <span class="badge bg-secondary">Badge</span></h4>
<h5>H5 heading with badge <span class="badge bg-secondary">Badge</span></h5>
<h6>H6 heading with badge <span class="badge bg-secondary">Badge</span></h6>
Button with badge
<button class="btn btn-secondary">Notifications <span class="badge bg-light text-dark">10</span></button><button class="btn btn-secondary">Notifications <span class="badge bg-light text-dark">10</span></button>
Button with accessible badge
<button class="btn btn-secondary">
Profile
<span class="badge bg-light text-dark">3</span>
<span class="visually-hidden">unread messages</span>
</button><button class="btn btn-secondary">
Profile
<span class="badge bg-light text-dark">3</span>
<span class="visually-hidden">unread messages</span>
</button>
Background colors
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span><span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>
Pill badges
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span><span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>