Badges Bootstrap

Badges in Bootstrap 4 are used to add extra information to any content, often used to highlight new or unread items. They can be used with various components such as buttons, navs, and more.

Basic Badge Example

You can add badges to any element with the .badge class. For example:

<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

Badge Colors

Bootstrap 4 provides various contextual classes for badges. Here are some examples:

<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>

Badge Inside a Button

You can place a badge inside a button to show, for example, unread messages:

<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
</button>

Badge Pills

You can make badges more rounded with the .badge-pill class:

<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>

Badge Links

Badges can also be used as part of links to provide additional information:

<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>

Example in a Nav

Badges can be used in a navigation bar to show, for example, the number of new messages:

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#">Home <span class="badge badge-primary">4</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Profile <span class="badge badge-secondary">3</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Messages <span class="badge badge-success">7</span></a>
  </li>
</ul>

Example Usage in Alerts

Badges can also be used in alerts to show additional information:

<div class="alert alert-primary" role="alert">
  This is a primary alert with a badge <span class="badge badge-light">New</span>
</div>
<div class="alert alert-secondary" role="alert">
  This is a secondary alert with a badge <span class="badge badge-light">Update</span>
</div>

These examples show the versatility of badges in Bootstrap 4, allowing you to highlight and provide additional context to your UI elements effectively.