Advertisement
Google Ad Slot: content-top
Bootstrap 5 Badges
In Bootstrap 5, badges are small, count-like indicators that can be used to highlight new content, notifications, or additional information. They can be styled using classes and are often used with buttons, links, or standalone elements.
Badge with Different Background Colors:
Badges support contextual color classes like bg-primary, bg-secondary, bg-success, etc.
Example
<h1>Example heading <span class="badge bg-primary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-success">New</span></h3>
<h4>Example heading <span class="badge bg-danger">New</span></h4>
<h5>Example heading <span class="badge bg-warning text-dark">New</span></h5>
<h6>Example heading <span class="badge bg-info text-dark">New</span></h6>
<div style="font-size:15px;margin-bottom: 5px;">Example heading <span class="badge bg-light text-dark">New</span></div>
<div style="font-size:13px">Example heading <span class="badge bg-dark">New</span></div>
Pill Badges:
To make badges rounded, use the rounded-pill class.
Example
<h1>Example heading <span class="badge rounded-pill bg-primary">New</span></h1>
<h2>Example heading <span class="badge rounded-pill bg-secondary">New</span></h2>
<h3>Example heading <span class="badge rounded-pill bg-success">New</span></h3>
<h4>Example heading <span class="badge rounded-pill bg-danger">New</span></h4>
<h5>Example heading <span class="badge rounded-pill bg-warning text-dark">New</span></h5>
<h6>Example heading <span class="badge rounded-pill bg-info text-dark">New</span></h6>
<div style="font-size:15px;margin-bottom: 5px;">Example heading <span class="badge rounded-pill bg-light text-dark">New</span></div>
<div style="font-size:13px">Example heading <span class="badge rounded-pill bg-dark">New</span></div>
Link Badges:
Badges can be used as links for clickable elements by adding the href attribute.
Example
<h1>Example heading <a href="#" class="badge rounded-pill bg-primary">New</a></h1>
<h2>Example heading <a href="#" class="badge rounded-pill bg-secondary">New</a></h2>
<h3>Example heading <a href="#" class="badge rounded-pill bg-success">New</a></h3>
<h4>Example heading <a href="#" class="badge rounded-pill bg-danger">New</a></h4>
<h5>Example heading <a href="#" class="badge rounded-pill bg-warning text-dark">New</a></h5>
<h6>Example heading <a href="#" class="badge rounded-pill bg-info text-dark">New</a></h6>
<div style="font-size:15px;margin-bottom: 5px;">Example heading <a href="#" class="badge rounded-pill bg-light text-dark">New</a></div>
<div style="font-size:13px">Example heading <a href="#" class="badge rounded-pill bg-dark">New</a></div>
Badge with Buttons:
Badges are often paired with buttons to display counts or statuses.
Example
<button type="button" class="btn btn-primary">
Messages <span class="badge bg-danger">5</span>
</button>