Bootstrap Badges and Labels

Bootstrap Badges

Bootstrap Badges are numerical indicators. It is used to show that how many items are associated with a link.The .badge class is used to create of Bootstrap Badges.

Let us see an example of Bootstrap Badges 1:

<!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.7/css/bootstrap.min.css">  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
</head>  
<body>  
<div class="container">  
<h2>Badges</h2>  
<a href="#">Voting <span class="badge">50</span></a><br>  
<a href="#">Comments <span class="badge">97</span></a><br>  
<a href="#">Updates <span class="badge">29</span></a>  
</div>  
</body>  
</html>

Try Now

Let us see an example of Bootstrap Badges 2:

Note: Bootstrap Badges can be used inside other elements such as bottons:

<div class="container">  
  <h2>Badges on Buttons</h2>  
<<button type="button" class="btn btn-primary">Primary <span class="badge">5</span></button>  
  button type="button" class="btn btn-success">Success <span class="badge">99</span></button>      
  <button type="button" class="btn btn-danger">Danger <span class="badge">15</span></button>          
</div>

Try Now

Bootstrap Labels

Bootstrap Labels is used to add additional information about something. The .label class is used to display the labels within <span< element.

There are following six contextual classes:

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

Let us see an example of Bootstrap Labels:

<!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.7/css/bootstrap.min.css">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
</head>  
<body>   
<div class="container">  
<!?Example of default label --->  
  <h1><span class="label label-default"> Default Label </span></h1>  
<!?Example of  contextual label  --->  
  <span class="label label-primary"> Contextual Primary Label</span>    
</div>  
</body>  
</html>

Try Now



ADVERTISEMENT
ADVERTISEMENT