Badges are text boxes with background colors that you can use for different purposes. From end user perspective generally these badges are useful for highlighting specific content within a block of text. Administrators use badges to showcase pending tasks something like a notification shown on iOS apps. Bootstrap 5 allows to create badges in multiple ways, let us explain all possible ways with code and demo.
Default Bootstrap Badges
From Bootstrap version 4, labels and badges are combined as badges. Earlier these components also were referred as tags. You have to use the base “badge” CSS class to identify any HTML element as a badge. For example, you can use badge class with text elements like headings and paragraph to add a label next to the content. Below is the code for creating default badges in Bootstrap next to the headings.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 5 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<!-- Start of Badges -->
<h1>This is H1 Heading <span class="badge bg-default">New</span></h1>
<h2>This is H2 Heading <span class="badge bg-default">New</span></h2>
<h3>This is H3 Heading <span class="badge bg-default">New</span></h3>
<h4>This is H4 Heading <span class="badge bg-default">New</span></h4>
<h5>This is H5 Heading <span class="badge bg-default">New</span></h5>
<h6>This is H6 Heading <span class="badge bg-default">New</span></h6>
<!-- End of Badges -->
<!-- Bootstrap 5 Scripts -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>The default Bootstrap badges will look like below:
As you see, all badge classes in version 4 are changed in version 5. For example, the default badge class in version 4 was “badge badge-default” which has been changed in version 5 as “badge bg-default”.
Bootstrap Contextual Color Badges
The default badge will have light grey color. But you don’t need to settle with only one color – Bootstrap 5 allows you to use contextual classes to add many more colors with primary, secondary, success, info, warning, danger, light and dark like below.
Below is the code block for the contextual badges:
<p class="badge bg-secondary">Secondary Badge</p>
<p class="badge bg-primary">Primary Badge</p>
<p class="badge bg-success">Success Badge</p>
<p class="badge bg-info">Info Badge</p>
<p class="badge bg-warning">Warning Badge</p>
<p class="badge bg-danger">Danger Badge</p>
<p class="badge bg-light">Light Badge</p>
<p class="badge bg-dark">Dark Badge</p>Consider adding text-dark class to light color badges like bg-light to make the text readable.
Bootstrap Contextual Color Pill Badges
By default the badges are in square shape with slight radius in the corners. If you want rounded corner badges in pill shape then just use “rounded-pill” class like below:
<p class="badge rounded-pill bg-secondary">Secondary Pill Badge</p>
<p class="badge rounded-pill bg-primary">Primary Pill Badge</p>
<p class="badge rounded-pill bg-success">Success Pill Badge</p>
<p class="badge rounded-pill bg-info">Info Pill Badge</p>
<p class="badge rounded-pill bg-warning">Warning Pill Badge</p>
<p class="badge rounded-pill bg-danger">Danger Pill Badge</p>
<p class="badge rounded-pill bg-light">Light Pill Badge</p>
<p class="badge rounded-pill bg-dark">Dark Pill Badge</p>The pill badges will look like below on browser:
Badge with Counter
The Bootstrap version 5.0 allows you to create badges with counters by default as shown below.
Below is the code for badge with counter:
<button class="btn btn-secondary">
Total Emails <span class="badge bg-secondary">200</span>
</button><br><br>
<button class="btn btn-secondary">
Unread Emails <span class="badge bg-danger">100</span>
</button><br><br>
<button class="btn btn-secondary">
Read Emails <span class="badge bg-success">100</span>
</button>That’s Not All
It is not necessary to use badges at the end of text content. Actually you can use in-between the paragraph like a text highlighter.
Also you can add font awesome icons in front and use it like a buttons with icons. Remember, you should link font awesome CSS in your page for using these icons.
<p style="font-size:2rem;"><span class="badge bg-info"><i class="fa fa-camera-retro"></i> Take a Picture</span></p>
<p style="font-size:2rem;"><span class="badge bg-warning"><i class="fa fa-shower"></i> Take a Shower</span></p>
<p style="font-size:2rem;"><span class="badge bg-primary"><i class="fa fa-dollar"></i> Donate a Dollar</span></p>
<p style="font-size:2rem;"><span class="badge bg-danger"><i class="fa fa-twitter"></i> Send a Tweet</span></p>
<p style="font-size:2rem;"><span class="badge bg-secondary"><i class="fa fa-youtube"></i> Watch a Video</span></p>
<p style="font-size:2rem;"><span class="badge bg-success"><i class="fa fa-file"></i> Upload a File</span></p>
<p style="font-size:2rem;"><span class="badge bg-light"><i class="fa fa-facebook"></i> Connect with Facebook</span></p>
<p style="font-size:2rem;"><span class="badge bg-dark"><i class="fa fa-twitter"></i> Follow in Twitter</span></p>It will produce the result like below on the browser:
If you do not want to use external font awesome icons, now Bootstrap 5 comes with in-built fonts as we have explained in the starter template. You have to include Bootstrap icons CSS file and use the CSS class like below to insert the font icons with badges.
<i class="bi bi-check-circle-fill"></i>
<p class="badge bg-success">Success Badge</p>
2 Comments
Leave your reply.