Badges
Documentation and examples for badges, our small count and labeling component.
Badges on Bootstrap<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
<button class="btn btn-primary d-flex align-items-center" type="button">Notifications <span class="badge bg-secondary ms-2">4</span></button>
<button class="btn btn-primary position-relative" type="button">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>
Background Color
Use our background utility classes to quickly change the appearance of a badge. Please note that when using Bootstrap’s default .bg-light
, you’ll likely need a text color utility like .text-dark
for proper styling. This is because background utilities do not set anything but background-color
.
<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-info">Info</span>
<span class="badge bg-warning">Warning</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark dark__bg-dark">Dark</span>
Primary Secondary Success Info Warning Danger 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-info">Info</span>
<span class="badge rounded-pill bg-warning">Warning</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark dark__bg-dark">Dark</span>
Primary Secondary Success Info Warning Danger Light Dark
<span class="badge fs--1 bg-primary">Primary<span class="fas fa-bell ms-1"></span></span>
<span class="badge fs--1 bg-secondary">Secondary<span class="fas fa-bell ms-1"></span></span>
<span class="badge fs--1 bg-success">Success<span class="fas fa-bell ms-1"></span></span>
<span class="badge fs--1 bg-info">Info<span class="fas fa-bell ms-1"></span></span>
<span class="badge fs--1 bg-warning">Warning<span class="fas fa-bell ms-1"></span></span>
<span class="badge fs--1 bg-danger">Danger<span class="fas fa-bell ms-1"></span></span>
<span class="badge fs--1 bg-light text-dark">Light<span class="fas fa-bell ms-1"></span></span>
<span class="badge fs--1 bg-dark dark__bg-dark">Dark<span class="fas fa-bell ms-1"></span></span>
Primary Secondary Success Info Warning Danger Light Dark