How to create Labels in Bootstrap

Goud.Kv
Posted by in Bootstrap category on for Beginner level | Points: 250 | Views : 3519 red flag

Bootstrap is developed by Twitter Inc, and comes with predefined CSS and JavaScript. By using Bootstrap, we can design a very good website easily. It is very Handy once you understand.

Introduction

Please read Bootstrap Introduction if you are new to Bootstrap.
Bootstrap consists of some label related classes which are used to style the labels in the webpage.

Background

The main objective of this article is to study different types of label creations using Bootstrap.

Using Bootstrap code

We have label classes in bootstrap.css. See the below example of creating a simple label.
<div>
        <span class="label label-default">I'm Label</span>
</div>
Now you will see the label in your browser as below,

Different sizes of Labels:
HTML had h1,h2,h3... tags for creating different sizes of labels.
<div>
        <h1><span class="label label-default">Hello</span> Bootstrap</h1>
        <h2><span class="label label-default">Hello</span> Bootstrap</h2>
        <h3><span class="label label-default">Hello</span> Bootstrap</h3>
        <h4><span class="label label-default">Hello</span> Bootstrap</h4>
        <h5><span class="label label-default">Hello</span> Bootstrap</h5>
        <h6><span class="label label-default">Hello</span> Bootstrap</h6>
</div>
Run the above code in your browser to see the following output

Types of Bootstrap Labels:
Bootstrap comes with different colors of label classes. Lets observe the below code,
<div>
       <span class="label label-default">Default</span>
       <span class="label label-primary">Primary</span>
       <span class="label label-warning">Warning</span>
       <span class="label label-info">Info</span>
       <span class="label label-success">Success</span>
       <span class="label label-danger">Danger</span>
</div>
If you observe the above code, we have label-primary, label-warning, label-info etc. predefined styles from Bootstrap.
The above code will gives following output in your browser

We can also create stylish labels by using nested label classes like below,
<div>
    <h1><span class="label label-primary"><span class="label label-success">Hello</span></span> Bootstrap</h1>
    <h1><span class="label label-info">Hello,<span class="label label-primary">welcome to</span></span> Bootstrap</h1>
</div>
This code snip will gives stylish labels as following


Creating Banners:
We can create Banners with Labels that might be used in some places like superior headings. See the below Example,
<div>
    <h1><span class="label label-primary"><span class="glyphicon glyphicon-book"></span> Welcome to Bootstrap Tutorial <span class="glyphicon glyphicon-book"></span></span></h1>
    <br />
    <h1><span class="label label-success"><span class="glyphicon glyphicon-tree-deciduous"></span> Trees are responsible for Healthy Society <span class="glyphicon glyphicon-tree-conifer"></span></span></h1>
    <br />
    <h1><span class="label label-info"><span class="glyphicon glyphicon-bookmark"></span> Bootstrap is devoloped by Twitter <span class="glyphicon glyphicon-bookmark"></span></span></h1>
    <br />
    <h1><span class="label label-warning"><span class="glyphicon glyphicon-flag"></span> Welcome to FIFA 2014 <span class="glyphicon glyphicon-flag"></span></span></h1>
    <br />
    <h1><span class="label label-danger"><span class="glyphicon glyphicon-map-marker"></span> Report the Issue to us <span class="glyphicon glyphicon-map-marker"></span></span></h1>
</div>
Save and Run the above code to see some example banners in your browser


Creating Badges:
We have already seen Badges in Lists in Bootstrap. Lets put them in the menu bar here.
<div>
    <ul class="nav nav-tabs">
        <li><a href="#">Home</a></li>
        <li><a href="#">Articles <span class="badge">5 New</span></a></li>
        <li class="active"><a href="#">Interviews <span class="badge">16 Updated</span></a></li>
        <li><a href="#">Bookmarks <span class="badge">4</span></a></li>
    </ul>
</div>
To get with Navs, Read Tabs and Pills in Bootstrap
If you run the above code, you will find the following output in the browser


Conclusion

In this article, we have seen creating different types of Labels using Bootstrap. Hope you understand. If you have any doubts on this topic, please ask below.

Thanks for reading.

Regards,
Krishna. 


Recommendation
Read Bootstrap Progress Bars after this article.
Page copy protected against web site content infringement by Copyscape

About the Author

Goud.Kv
Full Name: Krishna Vamshi Goud
Member Level: Gold
Member Status: Member,MVP
Member Since: 2/12/2014 2:34:09 AM
Country: India
Thanks & Regards, Krishna


Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)