Bootstrap - Badges

This chapter will discuss about bootstrap badges and the classes to create badges. Badges are frequently used for highlighting important details on web pages, such as headings, warnings, and notification counters.

Bootstrap badges are numerical indication or notification counters (of how many items are associated with a link).

Badges

To scale them according to the size of the immediate parent element, badge uses comparative font scaling and em units. In page links, focus or hover styles are no longer supported as of version 5.

Following example demonstrates how to create inline badges using Bootstrap.

Example

You can edit and try running this code using Edit & Run option.

  <!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">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
      <title>Bootstrap - Badges</title>
  </head>
  <body>
  <h1>Sample heading <span class="badge bg-secondary">New</span></h1>
  <h2>Sample heading <span class="badge bg-secondary">Offer</span></h2>
  <h3>Sample heading <span class="badge bg-secondary">New</span></h3>
  <h4>Sample heading <span class="badge bg-secondary">Offer</span></h4>
  <h5>Sample heading <span class="badge bg-secondary">New</span></h5>
  <h6>Sample heading <span class="badge bg-secondary">Offer</span></h6>
  </body>
  </html>

Buttons

Badges can be used as part of links or buttons to provide a counter. The users will only see the content of the badge because of how badges are styled, which gives a visual cue as to their purpose. These badges may appear to be random additions of words or numbers at the conclusion of a sentence, a link, or a button, based on the circumstances.

Example

You can edit and try running this code using Edit & Run option.

  <!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">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
      <title>Bootstrap - Badges</title>
  </head>
    <body>
    <button type="button" class="btn btn-success" style="margin: 20px;">
      Messages <span class="badge text-bg-warning">6</span>
    </button>
  </body>
  </html>

Notifications

This example explains a visually hidden class with a portion of additional text where users can see the digit "32" represents the number of notifications.

Example

You can edit and try running this code using Edit & Run option.

  <!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">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
      <title>Bootstrap - Badges</title>
  </head>
  <body>
  <button type="button" class="btn btn-success position-relative" style="margin: 20px;">
    Notifications
    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-primary">
      32+
      <span class="visually-hidden">unread notifications</span>
    </span>
  </button>
</body>
  </html>

Positioned

A .badge can be modified with top-0 , start-100 , translate-middle utilities and placed in the corner of a link or button. Let's look at the sample below to see how it generally functions.

Example

You can edit and try running this code using Edit & Run option.

  <!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">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
     <title>Bootstrap - Badges</title>
  </head>
  <body>
  <button type="button" class="btn btn-primary position-relative" style="margin: 20px;">
    Inbox
    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-info">
      55+
      <span class="visually-hidden">unread notifications</span>
    </span>
  </button>
</body>
  </html>

Indicator

Bootstrap Badges are a numerical indication of the number of items associated with a link. Items that are new or unread are highlighted using badges

Example

You can edit and try running this code using Edit & Run option.

  <!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">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
      <title>Bootstrap - Badges</title>
  </head>
  <body>
  <button type="button" class="btn btn-info position-relative" style="margin: 20px;">
    Webinar
    <span class="position-absolute top-0 start-100 translate-middle p-2 bg-primary border border-light rounded-circle">
      <span class="visually-hidden">New notifications</span>
    </span>
  </button>
</body>
  </html>

Background colors

Using the .text-bg-{color} helpers , users may set a background color with a contrasting foreground color. In the past, pairing the preferred .text-{color} and .bg-{color} utilities manually was necessary for styling; nevertheless, users are still free to do so if they wish.

Use the text-bg-primary, text-bg-info, text-bg-success etc. utility classes offered by bootstrap's background colour framework to instantly change the appearance of the badges.

Example

You can edit and try running this code using Edit & Run option.

  <!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">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
      <title>Bootstrap - Badges</title>
      </head>
      <body style="margin: 20px;">
      <span class="badge text-bg-primary">Primary</span>
      <span class="badge text-bg-info">Info</span>
      <span class="badge text-bg-secondary">Secondary</span>
      <span class="badge text-bg-success">Success</span>
      <span class="badge text-bg-light">Light</span>
      <span class="badge text-bg-dark">Dark</span>
      <span class="badge text-bg-warning">Warning</span>
      <span class="badge text-bg-danger">Danger</span>
      </body>
      </html>

Pill Badges

Users can design badges in the shape of pills, or badges having more rounded corners, by using the .rounded-pill modifier class, as demonstrated in the example below.

To quickly modify the appearance of the badges, use the .rounded-pill utility classes provided in bootstrap's background color framework.

Example

You can edit and try running this code using Edit & Run option.

  <!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">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
      <title>Bootstrap - Badges</title>
  </head>
    <body style="margin: 20px;">
    <span class="badge rounded-pill text-bg-primary">Primary</span>
    <span class="badge rounded-pill text-bg-secondary">Secondary</span>
    <span class="badge rounded-pill text-bg-info">Info</span>
    <span class="badge rounded-pill text-bg-success">Success</span>
    <span class="badge rounded-pill text-bg-light">Light</span>
    <span class="badge rounded-pill text-bg-dark">Dark</span>
    <span class="badge rounded-pill text-bg-danger">Danger</span>
    <span class="badge rounded-pill text-bg-warning">Warning</span>
    </body>
  </html>
Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements