Responsive Badge Component in Bootstrap 5.3

In Bootstrap 5.3, a badge is a small visual element used to highlight or indicate additional information within a user interface. Badges are typically used to display counts, notifications, status indicators, or labels. They are commonly seen in navigation menus, buttons, cards, and other UI components.

Bootstrap provides a built-in class called "badge" that can be applied to various HTML elements to create badges. By default, badges have a rounded shape and a background color that contrasts with the surrounding content. The text inside the badge is usually a number or a short label.

Here's an example of a basic badge in Bootstrap 5.3:

<h1>Heading Tags <span class="badge bg-primary">New</span></h1>
<h2>Heading Tags <span class="badge bg-primary">New</span></h2>
<h3>Heading Tags <span class="badge bg-primary">New</span></h3>
<h4>Heading Tags <span class="badge bg-primary">New</span></h4>
<h5>Heading Tags <span class="badge bg-primary">New</span></h5>
<h6>Heading Tags <span class="badge bg-primary">New</span></h6>

Buttons With Notification

To create badge buttons with notifications in Bootstrap 5.3, you can combine the button and badge components. Here's an example of how you can achieve this:

<button class="btn btn-success">Notification <span class="badge text-bg-secondary">5</span></button>

class="badge text-bg-secondary" this applies the Bootstrap classes "badge" and "text-bg-secondary" to the span element. The "badge" class styles the span element as a badge, and "text-bg-secondary" sets the text color to white and the background color to a secondary color (usually gray) for the badge.

So, the code creates a button with the text "Notification" and a badge indicating a count of 5. The badge has a gray background color and white text color. The button itself has a green color style applied to it. You can customize the classes, colors, and content according to your design needs.

Positioned Notification

To create a container <div> element with the class position-relative. This class allows the child elements to be positioned relative to this container.

<button class="btn btn-primary position-relative">Inbox <span class="badge bg-danger position-absolute rounded-pill top-0 start-100 translate-middle">99+</span></button>

Background colors

In Bootstrap 5.3, you can apply different background colors to badges using the contextual classes provided by the framework. These classes allow you to easily style badges with various background colors to convey different meanings or visual indicators.

Here are the available background color classes for badges in Bootstrap 5.3:

bg-primary: Applies the primary color as the background color for the badge.
bg-secondary: Applies a secondary color as the background color for the badge.
bg-success: Sets a success color as the background color for the badge.
bg-danger: Sets a danger color as the background color for the badge.
bg-warning: Applies a warning color as the background color for the badge.
bg-info: Sets an informative color as the background color for the badge.
bg-light: Applies a light color as the background color for the badge.
bg-dark: Sets a dark color as the background color for the badge.

<span class="badge bg-primary">Badge</span>
<span class="badge bg-secondary">Badge</span>
<span class="badge bg-success">Badge</span>
<span class="badge bg-danger">Badge</span>
<span class="badge bg-info">Badge</span>
<span class="badge bg-warning">Badge</span>
<span class="badge bg-dark">Badge</span>
<span class="badge bg-light">Badge</span>

Positioned Notification

In Bootstrap 5.3, pill badges are a variation of badges that have rounded corners, giving them a pill-like appearance. Pill badges are often used to display counts or labels in a more visually prominent and stylish way.

<span class="badge bg-primary rounded-pill">Badge</span>
<span class="badge bg-secondary rounded-pill">Badge</span>
<span class="badge bg-success rounded-pill">Badge</span>
<span class="badge bg-danger rounded-pill">Badge</span>
<span class="badge bg-info rounded-pill">Badge</span>
<span class="badge bg-warning rounded-pill">Badge</span>
<span class="badge bg-dark rounded-pill">Badge</span>
<span class="badge bg-light rounded-pill">Badge</span>

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Badge</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/base.css" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" />
  </head>
  <body>
    <div class="container mt-5">
      <p class="fw-semibold text-primary">Badge in Bootstrap</p>

      <p class="fw-semibold text-primary border-bottom border-primary py-3">Headings</p>
      <h1>Heading Tags <span class="badge bg-primary">New</span></h1>
      <h2>Heading Tags <span class="badge bg-primary">New</span></h2>
      <h3>Heading Tags <span class="badge bg-primary">New</span></h3>
      <h4>Heading Tags <span class="badge bg-primary">New</span></h4>
      <h5>Heading Tags <span class="badge bg-primary">New</span></h5>
      <h6>Heading Tags <span class="badge bg-primary">New</span></h6>

      <p class="fw-semibold text-primary border-bottom border-primary py-3">Buttons With Notification</p>
      <button class="btn btn-success">Notification <span class="badge text-bg-secondary">5</span></button>
      <hr class="my-3" />

      <p class="fw-semibold text-primary border-bottom border-primary py-3">Positioned Notification</p>
      <button class="btn btn-primary position-relative">Inbox <span class="badge bg-danger position-absolute rounded-pill top-0 start-100 translate-middle">99+</span></button>

      <hr class="my-3" />

      <button class="btn btn-success position-relative">
        <i class="bi bi-whatsapp"></i> Whatsapp
        <span class="position-absolute top-0 start-100 translate-middle bg-danger badge p-2 border border-light rounded-circle">
          <span class="visually-hidden">Alert</span>
        </span>
      </button>

      <p class="fw-semibold text-primary border-bottom border-primary py-3">Background colors</p>
      <span class="badge bg-primary">Badge</span>
      <span class="badge bg-secondary">Badge</span>
      <span class="badge bg-success">Badge</span>
      <span class="badge bg-danger">Badge</span>
      <span class="badge bg-info">Badge</span>
      <span class="badge bg-warning">Badge</span>
      <span class="badge bg-dark">Badge</span>
      <span class="badge bg-light">Badge</span>

      <p class="fw-semibold text-primary border-bottom border-primary py-3">Pill badges</p>
      <span class="badge bg-primary rounded-pill">Badge</span>
      <span class="badge bg-secondary rounded-pill">Badge</span>
      <span class="badge bg-success rounded-pill">Badge</span>
      <span class="badge bg-danger rounded-pill">Badge</span>
      <span class="badge bg-info rounded-pill">Badge</span>
      <span class="badge bg-warning rounded-pill">Badge</span>
      <span class="badge bg-dark rounded-pill">Badge</span>
      <span class="badge bg-light rounded-pill">Badge</span>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Live Preview