Bootstrap - Badges and Labels

Rubleen Kaur
Last Updated: May 13, 2022

Introduction

In this article, we will discuss Bootstrap - Badges and Labels. In Bootstrap, Badges are components used to separate the content in the same wrapper but a separate pane. Badges are used to add counts, tips, or another markup for our pages. We can display only one pane at a time. Let's discuss how we can create labels and badges on our websites. 

Basic Example of Badges and Labels

In Bootstrap, the badges scale to match the size of the corresponding parent element by the use of relative font sizing and em units. We can use badges as a part of links or buttons that can provide a counter on our elements.

While defining badges, programmers must make sure that the context of using them is clear to the user, and they do not seem to have unnecessary or random additional information. 

For example, we can create a badge to have a notification counter on our application. This badge has a precise context: the purpose is to denote the count of new notifications to the use. 

We are using a bootstrap element, to use bootstrap in your website, make sure to include the respective URLs, we are here adding the bundle and the CSS for including Bootstrap dependencies,

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

 

Add these, in the head section of your website, 

Let's now see how we can create a badge,

<!DOCTYPE html>
<html>
   <head>
      <title>Coding Ninja Demo</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
   </head>
   <body>
      <h1>Welcome to CN<span class="badge badge-primary">Hi</span></h1>
      <h2>Welcome to CN <span class="badge badge-primary">Hi</span></h2>
      <h3>Welcome to CN <span class="badge badge-primary">Hi</span></h3>
      <h4>Welcome to CN <span class="badge badge-primary">Hi</span></h4>
      <h5>Welcome to CN <span class="badge badge-primary">Hi</span></h5>
      <h6>Welcome to CN <span class="badge badge-primary">Hi</span></h6>
 </body>
</html>

 

OUTPUT

We have used a badge-primary class, and we can use these classes to modify the appearance of our badges. We will cover more such classes in detail in the next section. 

Contextual Variations of Badges

We can modify the appearance of the badges by the use of modifier classes such as badge-primary, badge-success, badge-infor, badge-warning, badge-danger, Let’s consider an example to see the available badges we can use in our websites, 

<!DOCTYPE html>
<html>
   <head>
      <title>Coding Ninja Demo</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
   </head>
   <body>
      <h1>Welcome to CN<span class="badge badge-primary">Hi</span></h1>
      <h2>Welcome to CN <span class="badge badge-dark">Hi</span></h2>
      <h3>Welcome to CN <span class="badge badge-danger">Hi</span></h3>
      <h4>Welcome to CN <span class="badge badge-success">Hi</span></h4>
      <h5>Welcome to CN <span class="badge badge-light">Hi</span></h5>
      <h6>Welcome to CN <span class="badge badge-secondary">Hi</span></h6>
 </body>
</html>

 

OUTPUT

 

Pill Badges

We can create badges in a more pill-shaped, which means more rounded from the edges. This can be achieved by the use of the .badge-pill class. The class adds more border-radius and additional padding to make sure the appearance is that of a pill. Let’s see how you can use them on the website, 

<!DOCTYPE html>
<html>
   <head>
      <title>Coding Ninja Demo</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
   </head>
   <body>
      <span class="badge badge-pill badge-primary">Primary</span>
      <span class="badge badge-pill badge-secondary">Secondary</span>
      <span class="badge badge-pill badge-success">Success</span>
      <span class="badge badge-pill badge-danger">Danger</span>
      <span class="badge badge-pill badge-warning">Warning</span>
      <span class="badge badge-pill badge-info">Info</span>
      <span class="badge badge-pill badge-light">Light</span>
      <span class="badge badge-pill badge-dark">Dark</span>
 </body>
</html>

 

OUTPUT

 

Badges with Links

We can use contextual badge classes in an anchor tag to provide actionable badges with hover and focus styles. The anchor tag allows us to add any external or internal link to our badges. 

<!DOCTYPE html>
<html>
   <head>
      <title>Coding Ninja Demo</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
   </head>
   <body>
      <a href="https://www.codingninjas.com/" class="badge badge-primary">Primary</a>
      <a href="https://www.codingninjas.com/" class="badge badge-secondary">Secondary</a>
      <a href="https://www.codingninjas.com/" class="badge badge-success">Success</a>
      <a href="https://www.codingninjas.com/" class="badge badge-danger">Danger</a>
      <a href="https://www.codingninjas.com/" class="badge badge-warning">Warning</a>
      <a href="https://www.codingninjas.com/" class="badge badge-info">Info</a>
      <a href="https://www.codingninjas.com/" class="badge badge-light">Light</a>
      <a href="https://www.codingninjas.com/" class="badge badge-dark">Dark</a>
 </body>
</html>

 

OUTPUT

In the output above, you can see that we have added an external link to the coding ninja's website when you hover on any badge. 

 

Frequently Asked Questions

  1. What are Badges in Bootstrap?
    In Bootstrap, badges are components that separate the content in the same wrapper but a separate pane. Badges are used to add counts, tips, or another markup for our pages.
     
  2. Which bootstrap class will you use to create a dark badge?
    In Bootstrap 4, we will use the badge-dark class. This class provides a dark background to the badge.
     
  3. How can you add a link to a badge?
    We can add a link to the badge by using the badge class with the anchor tag. 
    For example, 
<a href="https://www.codingninjas.com/" class="badge badge-primary">Primary</a>

      The above code will create a primary badge with an external link to the Coding Ninjas website. 

Key Takeaways

Hey everyone, so let's briefly describe the use of badges and the various listed classes one can use to modify them. If you want to learn more about Bootstrap and install it in your programs, do give this official documentation a read. 

  • This article covers what badges are and their uses.
  • We have further discussed how easily we can add contextual variations and use pill-shaped badges.
  • Further, we have seen how to add links to our badges.


Isn’t Web Development engaging? Building new websites and using amazing animations and different APIs, don’t be scared if you cannot grasp the hold of this vast development. We have the perfect web development course for you to make you stand out from your fellow developers. 

Happy Learning Ninjas!

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think