Bootstrap 5 Badges

Badges are mainly used to highlight new or unread items.

To use badges, simply add the .badge class plus a color class with the specified meaning (e.g. .bg-secondary) to the <span> element.

The badge can change depending on the size of the parent element:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 demos</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Badges(apidemos.com)</h2>
  <h1>Testing Title <span class="badge bg-secondary">New</span></h1>
  <h2>Testing Title <span class="badge bg-secondary">New</span></h2>
  <h3>Testing Title <span class="badge bg-secondary">New</span></h3>
  <h4>Testing Title <span class="badge bg-secondary">New</span></h4>
  <h5>Testing Title <span class="badge bg-secondary">New</span></h5>
  <h6>Testing Title <span class="badge bg-secondary">New</span></h6>
</div>

</body>
</html>

Output:

Bootstrap 5 Badges

Various color types of badges

All color types of badges are listed below:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 demos</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Various color types of badges(apidemos.com)</h2>
  <span class="badge bg-primary">primary</span>
  <span class="badge bg-secondary">secondary</span>
  <span class="badge bg-success">success</span>
  <span class="badge bg-danger">danger</span>
  <span class="badge bg-warning">warning</span>
  <span class="badge bg-info">info</span>
  <span class="badge bg-light">light</span>
  <span class="badge bg-dark">dark</span>
</div>

</body>
</html>

Output:

Bootstrap 5 Badges

Pill-shaped badge

Use the .rounded-pill class to set the pill shape badge:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 demos</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Pill-shaped badge</h2>
  <span class="badge rounded-pill bg-default">default</span>
  <span class="badge rounded-pill bg-primary">primary</span>
  <span class="badge rounded-pill bg-success">success</span>
  <span class="badge rounded-pill bg-info">info</span>
  <span class="badge rounded-pill bg-warning">warning</span>
  <span class="badge rounded-pill bg-danger">danger</span>
</div>

</body>
</html>

Output:

Bootstrap 5 Badges

Badge insertion into the element

The following example embeds the badge inside the button.

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 demos</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Badge embedded into the button(apidemos.com)</h2>
  <button type="button" class="btn btn-primary">
    Messages <span class="badge bg-danger">8</span>
  </button>
  <button type="button" class="btn btn-danger">
    Notifications <span class="badge bg-dark">9</span>
  </button>
</div>

</body>
</html>

Output:

Bootstrap 5 Badges

Bootstrap 5 Badges

Bootstrap 5 Badges

Various color types of badges

Pill-shaped badge

Badge insertion into the element

Related

Top