Badges
Documentation and examples for badges, our small count and labeling component.
https://getbootstrap.com/docs/5.1/components/badge/Examples
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Primary Secondary Success Danger Warning Info Light Dark
Primary Secondary Success Danger Warning Info Light Dark
Primary Secondary Success Danger Warning Info Light Dark
Primary Secondary Success Danger Warning Info Light Dark
Primary Secondary Success Danger Warning Info Light Dark
Primary Secondary Success Danger Warning Info Light Dark
<!--
Solid colors
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
Soft colors
.bg-primary-soft
.bg-secondary-soft
.bg-success-soft
.bg-danger-soft
.bg-warning-soft
.bg-info-soft
.bg-light-soft
.bg-dark-soft
Pill badges
.rounded-pill
-->
<span class="badge bg-primary">Primary</span>
<span class="badge bg-primary-soft">Primary</span>
<span class="badge rounded-pill bg-primary">Primary</span>
<!-- button -->
<button type="button" class="btn btn-primary">
Notifications <span class="badge bg-danger">4</span>
</button>
<!-- button, floating badge -->
<button type="button" class="btn btn-primary position-relative">
Inbox
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
10+
<span class="visually-hidden">unread messages</span>
</span>
</button>
<!-- button, floating badge, no text -->
<button type="button" class="btn btn-primary position-relative">
Profile
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
<span class="visually-hidden">New alerts</span>
</span>
</button>