Badges
Standard Badges
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
<p class="h1">Example heading <span class="badge text-bg-primary">New</span></p>
<p class="h2">Example heading <span class="badge text-bg-secondary">New</span></p>
<p class="h3">Example heading <span class="badge text-bg-success">New</span></p>
<p class="h4">Example heading <span class="badge text-bg-info">New</span></p>
<p class="h5">Example heading <span class="badge text-bg-warning">New</span></p>
<p class="h6">Example heading <span class="badge text-bg-danger">New</span></p>
Badges in button
<button type="button" class="btn btn-theme me-2">Notifications <span class="badge text-bg-warning">4</span> </button>
<button type="button" class="btn btn-theme me-2">Pages <span class="badge text-bg-info">New</span></button>Position Badges
<button type="button" class="btn btn-theme position-relative">
Inbox
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">unread messages</span>
</span>
</button>Badges inline
Theme Accent Primary Secondary Success Danger Warning Info Light Dark
<span class="badge text-bg-theme-1">Theme</span>
<span class=" badge text-bg-theme-accent-1">Accent</span>
<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>Badges inline
Theme Accent Primary Secondary Success Danger Warning Info Light Dark
<span class="badge rounded-pill text-bg-theme-1">Theme</span>
<span class="badge rounded-pill text-bg-theme-accent-1">Accent</span>
<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>Badges Lights
Theme Accent Primary Secondary Success Danger Warning Info Light Dark
<span class="badge badge-light text-bg-theme-1">Theme</span>
<span class=" badge badge-light text-bg-theme-accent-1">Accent</span>
<span class="badge badge-light text-bg-primary">Primary</span>
<span class="badge badge-light text-bg-secondary">Secondary</span>
<span class="badge badge-light text-bg-success">Success</span>
<span class="badge badge-light text-bg-danger">Danger</span>
<span class="badge badge-light text-bg-warning">Warning</span>
<span class="badge badge-light text-bg-info">Info</span>
<span class="badge badge-light text-bg-light">Light</span>
<span class="badge badge-light text-bg-dark">Dark</span>