Home >>Bootstrap Tutorial >Bootstrap Badges

Bootstrap Badges

Bootstrap badges are used to add additional information or news to any content like, the number of notification to the link. To create badges you need a <span> tag, inside this add class .badge with the contextual classes (like badge-danger). Badge create a background rectangular shape to the specified content.

Let's take an example of badges:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Badges</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Badges</h2>
  <h1>This heading contains<span class="badge badge-info">Badge</span></h1>
  <h2>This heading contains<span class="badge badge-info">Badge</span></h2>
  <h3>This heading contains <span class="badge badge-info">Badge</span></h3>
  <h4>This heading contains <span class="badge badge-info">Badge</span></h4>
  <h5>This heading contains <span class="badge badge-info">Badge</span></h5>
  <h6>This heading contains <span class="badge badge-info">Badge</span></h6>
</div>
</body>
</html>

Output:

Badges

This heading containsBadge

This heading contains Badge

Badges with contextual classes

Contextual classes (like primary, secondary, info, success, danger, etc.) is used to change the color of the badge:

Let's take an Example of Badges with contextual classes:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Badges</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Badges with contextual classes</h2>
  <span class="badge badge-secondary">Badge-secondary</span>
  <span class="badge badge-success">Badge-success</span>
 <span class="badge badge-danger">Badge-danger</span>
 <span class="badge badge-warning">Badge-warning</span>
  <span class="badge badge-dark">Badge-dark</span>
  <span class="badge badge-primary">Badge-primary</span>
</div>
</body>
</html>

Output:

Badges with contextual classes

Badge-secondary Badge-success Badge-danger Badge-warning Badge-dark Badge-primary

Badge inside an element

You can use badge inside the element like buttons or links.

Let's take an example of badge inside an element:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Badges</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Badge inside an element</h2>
  <button type="button" class="btn btn-success">
    Notifications <span class="badge badge-light">8</span>
  </button>
  <button type="button" class="btn btn-danger">
    Profile <span class="badge badge-light">12</span>
  </button>
</div>
</body>
</html>

Output:

Badge inside an element

Pill Badges

To create a badge you can add class .badge-pill. It helps you to make the badges more rounded.

Let's take an example of pill badges:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Badges</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Pill Badges</h2>
  <h4>Notifications  <span class="badge badge-danger badge-pill">4</span> </h4>
  <h4>Request  <span class="badge badge-info badge-pill">7</span> </h4>
	<h4>Update<span class="badge badge-warning badge-pill">3</span> </h4>
	<h4>Profile  <span class="badge badge-secondary badge-pill">5</span> </h4>
</div>
</body>
</html>

Output:

Pill Badges

Notifications 4

Request 7

Update3

Profile 5

« Previous Next »

Bootstrap Tutorial Bootstrap Introduction Bootstrap Example Bootstrap Container Bootstrap Jumbotron Bootstrap Grid System Bootstrap Alerts Bootstrap Typography Bootstrap Table Bootstrap Colors Bootstrap Forms Bootstrap Images Bootstrap Buttons Bootstrap Button Group Bootstrap Progress Bars Bootstrap Badges Bootstrap Pagination Bootstrap Cards Bootstrap Navs Bootstrap Fixed Navigation Bar Bootstrap Navigation Bar Bootstrap Collapse Bootstrap Carousel Bootstrap Modal Bootstrap Input Groups Bootstrap List Groups Bootstrap Tooltip Bootstrap Popover Bootstrap Flex Bootstrap Utilities Bootstrap Media Objects

Bootstrap Interview Questions

No Sidebar ads