Bootstrap Badge
The badge is used in website designing. It usually expresses the quality/readability of elements. Badges in web pages are used to showcase some valuable information like the counter value of unread messages, notifications, and headings. In bootstrap, badges are scaled up to match the size of their parent element.
Creating a badge
To create a badge use .badge class within <span> element. The general syntax used for creating any badge is
<span class="badge">Attach name</span>
You can modify it as per the requirement. The <span> class can be added with links or buttons. One interesting thing about badges is it expands itself to match the size of parent elements using relative font size and em units.
Example: Creating a badge using Bootstrap 5
Here we have attached a badge with headings. The badge adjusts its size according to the size of headings. The .bage class is added with the background color.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap Grid</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<h1>Example heading <span class="badge bg-secondary ">Badge</span></h1>
<h2>Example heading <span class="badge bg-secondary">Badge</span></h2>
<h3>Example heading <span class="badge bg-secondary">Badge</span></h3>
<h4>Example heading <span class="badge bg-secondary">Badge</span></h4>
<h5>Example heading <span class="badge bg-secondary">Badge</span></h5>
<h6>Example heading <span class="badge bg-secondary">Badge</span></h6>
</body>
</html>
Output:
Here is the output of the above program.
Background color
As we have already seen that we can use background colors to badges. Use background color utility class to change the background color. As background color utility class only sets the color of the background so for changing text color use text utility class.
Example: Adding background color to badges
Here we have added different background colors to badges. The .bg-secondary is used to add gray background to the badge. similarly for blue background use .bg-primary. To add contrast color to text use text utility class. Here we have use .text-dark for the light background badge.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap Grid</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<div class="container">
<h2> Background color in badges </h2>
<span class="badge bg-secondary ">Badge</span>
<span class="badge bg-primary">Badge</span>
<span class="badge bg-success">Badge</span>
<span class="badge bg-warning">Badge</span>
<span class="badge bg-danger">Badge</span>
<span class="badge bg-info">Badge</span>
<span class="badge bg-dark">Badge</span>
<span class="badge bg-light text-dark">Badge</span>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Pill badges
You can change the shape of badges too. To make the badge more rounded with a greater border-radius add a .rounded-pill utility class..
Example: Modifying the shape of badges
To add pill rounded shape to the border of badges use .rounded-pill utility within badge class.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap Grid</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<div class="container">
<h2> Background color in badges </h2>
<span class="badge rounded-pill bg-secondary ">Badge</span>
<span class="badge rounded-pill bg-primary">Badge</span>
<span class="badge rounded-pill bg-success">Badge</span>
<span class="badge rounded-pill bg-warning">Badge</span>
<span class="badge rounded-pill bg-danger">Badge</span>
<span class="badge rounded-pill bg-info">Badge</span>
<span class="badge rounded-pill bg-dark">Badge</span>
<span class="badge rounded-pill bg-light text-dark">Badge</span>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Adding badges to links/buttons
Badges can be added within buttons and links too. Add badge element to <button> or <link> tags.
Example: Adding badges to links/buttons using bootstrap 5
Here we have extended <button> and <link> tags with badge element. We have added a primary button with a secondary badge. Similarly, we have added a primary link with a secondary badge.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap Grid</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<div class="container">
<h2> Badges in links and buttons </h2>
<button type="button" class="btn btn-primary">Button <span class="badge bg-secondary">4</span></button>
<a href="#" class="link-primary">Link<span class="badge bg-secondary">5</span></a>
</div>
</body>
</html>
Conclusion
So now we know how to create badges using bootstrap. Add it to your web pages for alerts, messages, and notifications. Change its background color to add contextual meaning to badges. Style its border using pills. Add it with buttons and links. You can do lots with the badge class in bootstrap.
