Documentation and examples for badges, our small count and labeling component.
Bootstrap Badge documentationAdd any of the below mentioned modifier classes to change the appearance of a badge.
<span class="badge badge-primary mb-1">Primary</span>
<span class="badge badge-secondary mb-1">Secondary</span>
<span class="badge badge-success mb-1">Success</span>
<span class="badge badge-danger mb-1">Danger</span>
<span class="badge badge-warning mb-1">Warning</span>
<span class="badge badge-info mb-1">Info</span>
<span class="badge badge-light mb-1">Light</span>
<span class="badge badge-dark mb-1">Dark</span>
<span class="badge badge-primary mb-1">Icon Right<img src="assets/img/svg/check-light.svg" alt="Right" class="ms-1"></span>
<span class="badge badge-primary mb-1"><img src="assets/img/svg/check-light.svg" alt="Right" class="me-1">Icon left</span>
Use the below mentioned modifier classes to change the appearance of a badge .badge-sm
.
<span class="badge badge-sm badge-primary mb-1">Primary</span>
<span class="badge badge-sm badge-secondary mb-1">Secondary</span>
<span class="badge badge-sm badge-success mb-1">Success</span>
<span class="badge badge-sm badge-danger mb-1">Danger</span>
<span class="badge badge-sm badge-warning mb-1">Warning</span>
<span class="badge badge-sm badge-info mb-1">Info</span>
<span class="badge badge-sm badge-light mb-1">Light</span>
<span class="badge badge-sm badge-dark mb-1">Dark</span>
<span class="badge badge-sm badge-primary mb-1">Icon Right<img src="assets/img/svg/check-light.svg" alt="Right" class="ms-1"></span>
<span class="badge badge-sm badge-primary mb-1"><img src="assets/img/svg/check-light.svg" alt="Right" class="me-1">Icon left</span>
Use the .rounded-pill
modifier class to make badges more rounded (with a larger border-radius
and additional horizontal padding
).
<span class="badge rounded-pill badge-primary">Primary</span>
<span class="badge rounded-pill badge-secondary">Secondary</span>
<span class="badge rounded-pill badge-success">Success</span>
<span class="badge rounded-pill badge-danger">Danger</span>
<span class="badge rounded-pill badge-warning">Warning</span>
<span class="badge rounded-pill badge-info">Info</span>
<span class="badge rounded-pill badge-light">Light</span>
<span class="badge rounded-pill badge-dark">Dark</span>
Badges scale to match the size of the immediate parent element by using relative font sizing and em
units.
<div class="h1">Example heading <span class="badge badge-secondary">New</span></div>
<div class="h2">Example heading <span class="badge badge-secondary">New</span></div>
<div class="h3">Example heading <span class="badge badge-secondary">New</span></div>
<div class="h4">Example heading <span class="badge badge-secondary">New</span></div>
<div class="h5">Example heading <span class="badge badge-secondary">New</span></div>
<div class="h6">Example heading <span class="badge badge-secondary">New</span></div>
Badges can be used as part of links or buttons to provide a counter.
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light">4</span>
</button>