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