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>Badge</span></h1>
<h2>H2 heading with badge <span>Badge</span></h2>
<h3>H3 heading with badge <span>Badge</span></h3>
<h4>H4 heading with badge <span>Badge</span></h4>
<h5>H5 heading with badge <span>Badge</span></h5>
<h6>H6 heading with badge <span>Badge</span></h6><h1>H1 heading with badge <span>Badge</span></h1>
<h2>H2 heading with badge <span>Badge</span></h2>
<h3>H3 heading with badge <span>Badge</span></h3>
<h4>H4 heading with badge <span>Badge</span></h4>
<h5>H5 heading with badge <span>Badge</span></h5>
<h6>H6 heading with badge <span>Badge</span></h6>
Button with badge
<button class="btn btn-secondary">Notifications <span>10</span></button><button class="btn btn-secondary">Notifications <span>10</span></button>
Button with accessible badge
<button class="btn btn-secondary">
Profile
<span>3</span>
<span class="visually-hidden">unread messages</span>
</button><button class="btn btn-secondary">
Profile
<span>3</span>
<span class="visually-hidden">unread messages</span>
</button>
Background colors
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<span>Primary</span>
<span>Secondary</span>
<span>Success</span>
<span>Danger</span>
<span>Warning</span>
<span>Info</span>
<span>Light</span>
<span>Dark</span><span>Primary</span>
<span>Secondary</span>
<span>Success</span>
<span>Danger</span>
<span>Warning</span>
<span>Info</span>
<span>Light</span>
<span>Dark</span>
Pill badges
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<span>Primary</span>
<span>Secondary</span>
<span>Success</span>
<span>Danger</span>
<span>Warning</span>
<span>Info</span>
<span>Light</span>
<span>Dark</span><span>Primary</span>
<span>Secondary</span>
<span>Success</span>
<span>Danger</span>
<span>Warning</span>
<span>Info</span>
<span>Light</span>
<span>Dark</span>