How to give color to label in bootstrap?

Hi 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.

Bootstrap, Label, Color

All the best 👍