Bootstrap 5 Badges

Badges are used to add additional information to any content:

Use the .badge class together with a contextual class (like .bg-secondary) within elements to create rectangular badges. Note that badges scale to match the size of the parent element (if any):

Example

<div class="container mt-3">
 <h2>Badges
 <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>

Examples

Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New

In this example:

The <span> class="badge badge-primary badge-pill">5</span> element represents a badge with the Bootstrap classes for primary color (badge-primary) and a pill shape (badge-pill).

The badge is placed inside a list item (<li>) to show how it can be used in a typical context, such as a product list.