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.

Example

<h1>

Notifications <span class="badge bg-primary">4</span>

</h1>

Try it yourself

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>

Try it yourself

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>

Try it yourself

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>

Try it yourself

Badge with Buttons:

Badges are often paired with buttons to display counts or statuses.

Example

Messages <span class="badge bg-danger">5</span>

</button>

Try it yourself

❮ Previous

Next ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.