Bootstrap Badges and Labels

Bootstrap Badges

Bootstrap Badges are numerical indicators used to show that how many items are associated with the specific link. Badges are used to highlight new or unread items.

The class .badge within the <span> element is used to create badges.

Bootstrap Badge Example

 <!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/3.3.6/css/bootstrap.min.css">
 
</head>
<body>

<div class="container">
  <h2>Badges</h2>
  <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>
</div>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

Test it Now

Bootstrap Badge Example 2

You can also use badges inside other elements, such as buttons.

Let's take an example to see how to add badges to button.

 <!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/3.3.6/css/bootstrap.min.css">
  
</head>
<body>


<div class="container">
  <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>        
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

Test it Now

Bootstrap Labels

Bootstrap labels are used to specify the additional information about something like offering counts, tips, or other makeup for pages.

The class .label is used to display the labels.

Bootstrap Label Example

 <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Label 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/3.3.6/css/bootstrap.min.css">

</head>
<body> 
 
<div class="container">
  <h2>Labels Example</h2>
  <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>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</body>
</html>

Test it Now

Bootstrap Label Example 2: changing colors

We can change the label colors by using contextual label classes.

 <!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="https://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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</body>
</html>

Test it Now

Bootstrap Label Example 3

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 
</head>
<body> 
 
<div class="container">
  <h2>Labels Example</h2>
  <h3>Update <span class="label label-default">new</span>
  <h3>Update <span class="label label-primary">new</span>
  <h3>Update <span class="label label-success">new</span>
  <h3>Update <span class="label label-info">new</span>
  <h3>Update <span class="label label-warning">new</span>
  <h3>Update <span class="label label-danger">new</span>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</body>
</html>

Test it Now

Bootstrap 4 Badges

In Bootstrap 4, badges can also be used with heading tags (<h1>......<h6>). Use the .badge class together with a contextual class (like .badge-secondary) within <span> elements to create rectangular badges.

Example:

<!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>

Test it Now

Contextual Badges

You can use the contextual classes to change the color of a badge.

Example:

<!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>

Test it Now

Bootstrap 4 Pill Badges

Pill badges are used to make the badges more round. Use the class .badge-pill class to add pill badges.

Example:

<!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>Pill Badges Example</h2>
  <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>
</div>

</body>
</html>

Test it Now

Next TopicBootstrap Panels

← prev next →