Bootstrap4 Badges
Badges are mainly used to highlight new or unread items. To use a badge, simply add the.badgeclass plus a color class with specified meaning (such as.badge-secondary) to the<span>element is sufficient. Badges can change according to the size of the parent element:
Example
<h1>Test title<span class="badge badge-secondary">New</span></h1>
<h2>Test title<span class="badge badge-secondary">New</span></h2>
<h3>Test title<span class="badge badge-secondary">New</span></h3>
<h4>Test title<span class="badge badge-secondary">New</span></h4>
<h5>Test title<span class="badge badge-secondary">New</span></h5>
<h6>Test title<span class="badge badge-secondary">New</span></h6>
Try it »
Badges of Various Color Types
The following lists badges of all color types:
Example
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
Try it »
Pill Badges
Use the.badge-pillclass to set pill-shaped badges:
Example
<span class="badge badge-pill badge-default">Default</span>
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-danger">Danger</span>
Try it »
Insert Badges into Elements
The following example embeds a badge into a button:
Example
<button type="button" class="btn btn-primary">
Messages <span class="badge badge-light">4</span>
</button>
Try it »