Bootstrap Badges and Labels

March 28th, 2020

Prerana Kasar

Bootstrap Badges and Labels

Bootstrap badges is a numerical mark which shows how many contents are connected to that link. Where Bootstrap Labels is used to gives the extra information.

Bootstrap Badges

Bootstrap badges is a numerical mark which shows how many contents are connected to that link. The class .badge to the tag is used to create the badgess

Example: 1 Bootstrap Badges Example

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Badges Example</title>
    <!-- link the bootstrap online or through CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
  	</script>
     
</head>
<body>
	<div class="container">
		<h2>Badges Example</h2>
		<a href="#">Messages <span class="badge">4</span></a><br /><br />
		<a href="#">Miss-Calls <span class="badge">10</span></a><br /><br />
		<a href="#">Calls <span class="badge">20</span></a>
	</div>
</body>
</html>

Here we apply the .badge class to the tag. And it connected through the link tag <a>

Bootstrap Badge Button

Bootstrap badge button is similar to the badge just have the look and feel of the bootstrap badge button. This class is apply with the button tag.

Example: 2 Bootstrap Badges Button Example

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Badges Example</title>
    <!-- link the bootstrap online or through CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
  	</script>
     
</head>
<body>
	<div class="container">
		<h2>Badges Example</h2>
		<button type="button" class="btn btn-primary">Messages <span class="badge">4</span></button><br /><br />
		<button type="button" class="btn btn-primary">Miss-Calls <span class="badge">10</span></button> <br /><br />
		<button type="button" class="btn btn-primary">Calls <span class="badge">20</span></button>
	</div>
</body>
</html>

Here we apply the .badge class to the tag and create the button tag.

Bootstrap Labels

Bootstrap Labels is used to gives the extra information. The class .lable is used with the .lable-default class . Only .label class this is not work.

Example: 3 Bootstrap Lables Example

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Badges Example</title>
    <!-- link the bootstrap online or through CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
  	</script>
     
</head>
<body>
	<div class="container">
		<h2>Lable Example</h2>
		<h3>Lable 1<span class="label label-default">New</span></h3>
		<p>Lable 2 <span class="label  label-default">New</span></p>
	</div>
</body>
</html>

Here we apply the .lable and .label-default class to the tag with any of text tag..

Bootstrap Lables — Fig.3- Bootstrap Lable Example.

Bootstrap Labels With Contextual Classes

The class .lable is used with the six contextual classes such are .lable-default, .lable-primary, .lable-success, .lable-info, .lable-warning and .lable-danger. Using the contextual classes this lables are more styled and enhance the look and feel.

Example: 4 Bootstrap Lables With Contextual Classes Example

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Badges Example</title>
    <!-- link the bootstrap online or through CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
  	</script>
     
</head>
<body>
	<div class="container">
		<h2>Lable Example</h2>
		<h3> <span class="label label-default">Default Label</span></h3>
		<h3> <span class="label label-primary">Primary Label</span></h3>
		<h3> <span class="label label-info">Info Label</span></h3>
		<h3> <span class="label label-success">Success Label</span></h3>
		<h3> <span class="label label-warning">Warning Label</span></h3>
		<h3> <span class="label label-danger">Danger Label</span></h3>
	</div>
</body>
</html>

Here we apply the .lable and the six contextual classes to the tag with any of text tag..