In this article, we will learn the Bootstrap labels and badges & their implementation. Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. Bootstrap is one of the most popular front-end frameworks which has really a nice set of predefined CSS codes. Bootstrap uses different types of classes to make responsive websites. Bootstrap labels and badges are used to specify the additional information. Badges scale to match the size of the immediate parent element by using relative font sizing. The labels tell additional information about the link or text.
Labels: Bootstrap ‘.label’ class is a pre-defined class that provides the important additional details related to links or text on web pages such as warnings, counts, update, alert and tips, etc. in a different format. & also adds styles to the content on the web page.
Syntax:
<span class="label label-primary">Content</span>
Types: Following are the 6 types of labels available in Bootstrap:
- label-default: As the name suggests, this is the default label used, when no other label is used to an element.
- label-primary: This label is used to represent some important labels by adding the blue color to an element.
- label-success: This label is used to represent success or some positive action labels by adding the green color to an element.
- label-info: This label is used to indicates an informative label by adding the light-blue color to an element.
- label-warning: This label is used to indicates an alert or negative action label by adding the yellow color to an element.
- label-danger: This label is used to indicates danger or negative action label by adding the red color to an element.
Approach: We will implement the label in the following method:
- Include Bootstrap CDN into the <head> tag before all other stylesheets to load our CSS.
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
- Add <div> tag in the HTML body with class container.
- Declare <span> tag with .label class in html body.
- Add different label such as .label-success, .label-primary, .label-danger, classes to add background color to labels.
Example 1: This example illustrates the implementation of labels.
<!DOCTYPE html> <html lang="en">
<head>
<title>Bootstrap Label Example</title>
<link rel="stylesheet" href=
</head>
<body>
<div class="container">
<h2>Bootstrap Label Example</h2>
<h6>GeeksForGeeks
<span class="label label-success">New</span>
</h6>
<h5>GeeksForGeeks
<span class="label label-primary">New</span>
</h5>
<h4>GeeksForGeeks
<span class="label label-success">New</span>
</h4>
<h3>GeeksForGeeks
<span class="label label-warning">New</span>
</h3>
<h2>GeeksForGeeks
<span class="label label-danger">New</span>
</h2>
<h1>GeeksForGeeks
<span class="label label-default">New</span>
</h1>
</div>
</body>
</html>
|
Output:
Example 2: This example illustrates labels with different pre-defined contextual classes.
<!DOCTYPE html> <html lang="en">
<head>
<link rel="stylesheet" href=
</head>
<body>
<div class="container">
<h2>Bootstrap 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-warning">Warning Label</span>
<span class="label label-danger">Danger Label</span>
<span class="label label-info">Info Label</span>
</div>
</body>
</html>
|
Output:
Badges: Badges are simple and basic components that are used to display an indicator or count a number. This is quite useful for mail count and alerting purposes, among other things. Badges are identical to labels, with the exception that they have more rounded corners. Badges scale to match the size of the immediate parent element by using relative font sizing and em units. These can be used using a pre-defined ‘.badge’ class. Please refer to the Bootstrap-5 Badges article for further details.
Syntax:
<div class="badge bg-type"> Contents... <div>
Types: Following are the 8 types of backgrounds available in Bootstrap 5.
- bg-primary: It is used to add a blue color background to the element that highlights the importance of the element.
- bg-info: It is used to represent some information by adding a light-blue background color to an element.
- bg-success: It is used to represent success or positive action by using the green background color to an element.
- bg-danger: It is used to indicates the danger or negative action by using the red background color to an element.
- bg-warning: It is used to indicates the alert or the negative action by using the yellow background color to an element.
- bg-secondary: It is used to represent the uninformative or secondary action by using the grey background color to an element.
- bg-light: It is used to represent the transparent background color to an element.
- bg-dark: It is used to represent the dark grey background color to an element.
Approach: We will implement the badges in the following method:
- Include Bootstrap CDN into the <head> tag before all other stylesheets to load our CSS.
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
- Add <div> tag in the HTML body with class container.
- Add <span> with class badge in the <button> tag.
Note: You can also add links to other websites attached to badges using the <a> tag which gets opened when the button is clicked.
Example 1: This example illustrates Badges inside the button.
<!DOCTYPE html> <html lang="en">
<head>
<link rel="stylesheet" href=
</head>
<body>
<div class="container">
<h2>Bootstrap Badge Example</h2>
<button type="button" class="btn btn-danger">
Danger <span class="badge">10</span>
</button>
<button type="button" class="btn btn-success">
Success <span class="badge">12</span>
</button>
<button type="button" class="btn btn-warning">
Warning <span class="badge">20</span>
</button>
<button type="button" class="btn btn-primary">
Warning <span class="badge">25</span>
</button>
<button type="button" class="btn btn-info">
Warning <span class="badge">6</span>
</button>
</div>
</body>
</html>
|
Output:
Example 2: This example illustrates Badges with links to other websites and also used the ‘Pill Badges’ to make the corner more rounded like a pill.
<!DOCTYPE html> <head>
<title>Pill badge example</title>
<link rel="stylesheet" href=
</head>
<body>
<div class="container">
<h4 class="text-success">
Badges with link to other websites.
</h4>
<button type="button" class="btn btn-primary">
GeeksForGeeks <span class=
"badge badge-pill badge-light">1</span>
</button>
</a>
<a href=
<button type="button" class="btn btn-default">
Web-development <span class=
"badge badge-pill badge-info">8</span>
</button>
</a>
<a href=
<button type="button" class="btn btn-info">
Machine-learning <span class=
"badge badge-pill badge-danger">6</span>
</button>
</a>
<a href=
<button type="button" class="btn btn-success">
Data-structures <span class=
"badge badge-pill badge-warning">2</span>
</button>
</a>
</div>
</body>
</html>
|
Output:
Supported Browser:
- Google Chrome
- Firefox
- Internet Explorer
- Microsoft Edge
- Safari
- Opera