How to give color to label in bootstrap?
June 10, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
In this tutorial, we will learn how to give color to label in bootstrap.
To give color to label, put .label class to change the color of the label.
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>Table of contents
- Includes bootstrap library
- Define its class name
Step 1: Includes bootstrap library
First of all, load the Bootstrap framework CSS into the head tag of your webpage.
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> Step 2: Define its class name
Here we will use the bootstrap class to change the color of label.
<div class="container">
<h2>Bootstrap Label color Example</h2>
<h6>aGuideHub
<span class="label label-success">New</span>
</h6>
<h5>aGuideHub
<span class="label label-primary">New</span>
</h5>
<h4>aGuideHub
<span class="label label-success">New</span>
</h4>
<h3>aGuideHub
<span class="label label-warning">New</span>
</h3>
<h2>aGuideHub
<span class="label label-danger">New</span>
</h2>
<h1>aGuideHub
<span class="label label-default">New</span>
</h1>
</div>Example.
Let’s look at the following example to understand how it basically works:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Label Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<h2>Bootstrap Label color Example</h2>
<h6>aGuideHub
<span class="label label-success">New</span>
</h6>
<h5>aGuideHub
<span class="label label-primary">New</span>
</h5>
<h4>aGuideHub
<span class="label label-success">New</span>
</h4>
<h3>aGuideHub
<span class="label label-warning">New</span>
</h3>
<h2>aGuideHub
<span class="label label-danger">New</span>
</h2>
<h1>aGuideHub
<span class="label label-default">New</span>
</h1>
</div>
</body>
</html>Check the output of the above code example.
All the best 👍