Bootstrap Badges and Labels

Bootstrap Badges

Bootstrap Badges are useful in almost all kinds of different websites now. They are, basically, numerical indicators that help us show the number of items associated a specific link.

For examples, a typical use of badges is to notify the number of unread messages in your inbox.

A basic can be added by using the .badge classes with the <span> element. See the sample code below for illustration:

        <h2>Badges</h2>
        <hr>
        <a href="#">News <span class="badge">5</span></a><br>  
        <a href="#">Comments <span class="badge">10</span></a><br>  
        <a href="#">Updates <span class="badge">2</span></a>

<h2>Badges</h2>

<hr>

<a href="#">Comments <span class="badge">10</span></a><br>

<a href="#">Updates <span class="badge">2</span></a>

Try It

Bootstrap Button Badge

The example below will tell you how to use badges with some buttons:

 <h2>Badges on Buttons</h2>
        <button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>  
        <button type="button" class="btn btn-success">Success <span class="badge">3</span></button>      
        <button type="button" class="btn btn-danger">Danger <span class="badge">5</span></button>

<h2>Badges on Buttons</h2>

<button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>

<button type="button" class="btn btn-success">Success <span class="badge">3</span></button>

<button type="button" class="btn btn-danger">Danger <span class="badge">5</span></button>

Try It

Bootstrap Contextual class badge example

        <span class="badge badge-primary">Primary</span>
        <span class="badge badge-secondary">Secondary</span>
        <span class="badge badge-success">Success</span>
        <span class="badge badge-danger">Danger</span>
        <span class="badge badge-warning">Warning</span>
        <span class="badge badge-info">Info</span>
        <span class="badge badge-light">Light</span>
        <span class="badge badge-dark">Dark</span>

<span class="badge badge-primary">Primary</span>

<span class="badge badge-secondary">Secondary</span>

<span class="badge badge-success">Success</span>

<span class="badge badge-danger">Danger</span>

<span class="badge badge-warning">Warning</span>

<span class="badge badge-light">Light</span>

Try It

Bootstrap badge Pill

         <ul class="list-group">
            <li class="list-group-item">Inbox <span class="badge badge-pill badge-primary">500</span></li>
            <li class="list-group-item">Read <span class="badge badge-pill badge-success">400</span></li>
            <li class="list-group-item">Unread <span class="badge badge-pill badge-info">10</span></li>
            <li class="list-group-item">Spam <span class="badge badge-pill badge-warning">10</span></li>
            <li class="list-group-item">Trace <span class="badge badge-pill badge-secondary">10</span></li>
        </ul>

<li class="list-group-item">Inbox <span class="badge badge-pill badge-primary">500</span></li>

<li class="list-group-item">Unread <span class="badge badge-pill badge-info">10</span></li>

<li class="list-group-item">Trace <span class="badge badge-pill badge-secondary">10</span></li>

</ul>

Try It

Bootstrap badge size

 <h2>Badges Example</h2>
        <hr>
        <h2>Exciting Offers <span class="badge badge-danger">New</span></h2>
        <h3>Exciting Offers <span class="badge badge-secondary">New</span></h3>
        <h4>Exciting Offers <span class="badge badge-success">New</span></h4>
        <h5>Exciting Offers <span class="badge badge-warning">New</span></h5>
        <h6>Exciting Offers <span class="badge badge-info">New</span></h6>

<h2>Badges Example</h2>

<hr>

<h2>Exciting Offers <span class="badge badge-danger">New</span></h2>

<h3>Exciting Offers <span class="badge badge-secondary">New</span></h3>

<h4>Exciting Offers <span class="badge badge-success">New</span></h4>

<h5>Exciting Offers <span class="badge badge-warning">New</span></h5>

<h6>Exciting Offers <span class="badge badge-info">New</span></h6>

Try It

Bootstrap badges with icons

Try It

Bootstrap Labels

The labels are different from badges in the sense that they are generally non-numerical and tells you about the element itself rather than the items it is holding. They can be used for offering tips, counts etc.

The class .label can be used to add labels to your page.

  <h1>Update <span class="label label-default">New</span></h1>  
  <h2>Update<span class="label label-default">New</span></h2>  
  <h3>Update <span class="label label-default">New</span></h3>  
  <h4>Update<span class="label label-default">New</span></h4>  
  <h5>Update<span class="label label-default">New</span></h5>  
  <h6>Update<span class="label label-default">New</span></h6>

<h1>Update <span class="label label-default">New</span></h1>

<h2>Update<span class="label label-default">New</span></h2>

<h3>Update <span class="label label-default">New</span></h3>

<h4>Update<span class="label label-default">New</span></h4>

<h5>Update<span class="label label-default">New</span></h5>

<h6>Update<span class="label label-default">New</span></h6>

Try It

The label colors can also be changed by using the following contextual label classes:

label-default
label-primary
label-success
label-info
label-warning
label-danger

 <!DOCTYPE html>  
<html lang="en">  
<head>  
  <title>Bootstrap Contextual Label</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
</head>  
<body>   
<div class="container">  
  <h2>Contextual Label Classes</h2>   
  <span class="label label-default">Default Label</span>  
  <span class="label label-primary">Primary Label</span>  
  <span class="label label-success">Success Label</span>  
  <span class="label label-info">Info Label</span>  
  <span class="label label-warning">Warning Label</span>  
  <span class="label label-danger">Danger Label</span>  
</div>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
</body>  
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Contextual Label</title>

</head>

<body>

<h2>Contextual Label Classes</h2>

<span class="label label-default">Default Label</span>

<span class="label label-primary">Primary Label</span>

<span class="label label-success">Success Label</span>

<span class="label label-info">Info Label</span>

<span class="label label-warning">Warning Label</span>

<span class="label label-danger">Danger Label</span>

</div>

</body>

</html>

Badges Headings

You can also use Badges with the heading tags (<h1>……<h6>). For this, along with the .badge you also need to use the .badge-secondary class within <span> elements>.

This will help creating rectangular badges.

 <!DOCTYPE html>  
<html lang="en">  
<head>  
  <title>Bootstrap Example</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>  
</head>  
<body>  
<div class="container">  
  <h2>Badges Example</h2>  
  <h1>h1 heading <span class="badge badge-secondary">New</span></h1>  
  <h2>h2 heading <span class="badge badge-secondary">New</span></h2>  
  <h3>h3 heading <span class="badge badge-secondary">New</span></h3>  
  <h4>h4 heading <span class="badge badge-secondary">New</span></h4>  
  <h5>h5 heading <span class="badge badge-secondary">New</span></h5>  
  <h6>h6 heading <span class="badge badge-secondary">New</span></h6>  
</div>  
</body>  
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<h2>Badges Example</h2>

<h1>h1 heading <span class="badge badge-secondary">New</span></h1>

<h2>h2 heading <span class="badge badge-secondary">New</span></h2>

<h3>h3 heading <span class="badge badge-secondary">New</span></h3>

<h4>h4 heading <span class="badge badge-secondary">New</span></h4>

<h5>h5 heading <span class="badge badge-secondary">New</span></h5>

<h6>h6 heading <span class="badge badge-secondary">New</span></h6>

</div>

</body>

</html>

Contextual Badges

Here’s a list of contextual classes for colored badges:

badge-primary
badge-secondary
badge-success
badge-danger
badge-warning
badge-info
badge-light
badge-dark

 <!DOCTYPE html>  
<html lang="en">  
<head>  
  <title>Bootstrap Example</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>  
</head>  
<body>  
<div class="container">  
  <h2>Contextual Badges Example</h2>  
  <span class="badge badge-primary">Primary Badge</span>  
  <span class="badge badge-secondary">Secondary Badge</span>  
  <span class="badge badge-success">Success Badge</span>  
  <span class="badge badge-danger">Danger Badge</span>  
  <span class="badge badge-warning">Warning Badge</span>  
  <span class="badge badge-info">Info Badge</span>  
  <span class="badge badge-light">Light Badge</span>  
  <span class="badge badge-dark">Dark Badge</span>  
</div>  
</body>  
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<h2>Contextual Badges Example</h2>

<span class="badge badge-primary">Primary Badge</span>

<span class="badge badge-secondary">Secondary Badge</span>

<span class="badge badge-success">Success Badge</span>

<span class="badge badge-danger">Danger Badge</span>

<span class="badge badge-warning">Warning Badge</span>

<span class="badge badge-info">Info Badge</span>

<span class="badge badge-light">Light Badge</span>

<span class="badge badge-dark">Dark Badge</span>

</div>

</body>

</html>