if you are new to Bootstrap.
Menu's are like a heart of the webpage which makes user easy to navigate particular sections. Bootstrap comes with Navs and Navbars to create menu's.
Objective
The main objective of this article is to learn creating simple Tabs and Pills using Twitter Bootstrap
Using Bootstrap code
Including Tabs's in the web application gives more flexibility to the user to access different pages of that website. Bootstrap have some predefined Styles to create beautiful menus. Lets see one by one,Creating Tabs & Pills
We have to use nav-tabs class to create tabs in Bootstrap. Have a look at the below example,
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Bookmarks</a></li>
<li><a href="#">Notifications</a></li>
<li><a href="#">Tags</a></li>
<li><a href="#">Settings</a></li>
</ul>The output of the above code will be,
Now change the class of ul in the above code to nav-pills i.e,
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Bookmarks</a></li>
<li><a href="#">Notifications</a></li>
<li><a href="#">Tags</a></li>
<li><a href="#">Settings</a></li>
</ul>Look the change in your browser. It will be like,
Creating Tabs & Pills with Icons
As we know that, there are so many icons in Bootstrap. Lets try them in Tabs and Pills. Observe the below code,
<ul class="nav nav-tabs">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li><a href="#"><span class="glyphicon glyphicon-film"></span> Gallery</a></li>
<li><a href="#"><span class="glyphicon glyphicon-bookmark"></span> Bookmarks</a></li>
<li><a href="#"><span class="glyphicon glyphicon-globe"></span> Notifications</a></li>
<li><a href="#"><span class="glyphicon glyphicon-tags"></span> Tags</a></li>
<li><a href="#"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
</ul>In the above code if you observe, we just added Glyphicons to the elements. Now see the output of this code. It seems like,
Now change the class of ul in the above code to nav-pills as below,
<ul class="nav nav-pills">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li><a href="#"><span class="glyphicon glyphicon-film"></span> Gallery</a></li>
<li><a href="#"><span class="glyphicon glyphicon-bookmark"></span> Bookmarks</a></li>
<li><a href="#"><span class="glyphicon glyphicon-globe"></span> Notifications</a></li>
<li><a href="#"><span class="glyphicon glyphicon-tags"></span> Tags</a></li>
<li><a href="#"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
</ul>If you run the above code snip in your browser, you will get following output
Creating stacked Pills and Tabs
How about stacked tabs and pills?.. Bootstrap contains nav-stacked class for that. Add this class to the above code as below,
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li><a href="#"><span class="glyphicon glyphicon-film"></span> Gallery</a></li>
<li><a href="#"><span class="glyphicon glyphicon-bookmark"></span> Bookmarks</a></li>
<li><a href="#"><span class="glyphicon glyphicon-globe"></span> Notifications</a></li>
<li><a href="#"><span class="glyphicon glyphicon-tags"></span> Tags</a></li>
<li><a href="#"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
</ul>Output of the above snip will be,
For nav-tabs i.e,
<ul class="nav nav-tabs nav-stacked">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li><a href="#"><span class="glyphicon glyphicon-film"></span> Gallery</a></li>
<li><a href="#"><span class="glyphicon glyphicon-bookmark"></span> Bookmarks</a></li>
<li><a href="#"><span class="glyphicon glyphicon-globe"></span> Notifications</a></li>
<li><a href="#"><span class="glyphicon glyphicon-tags"></span> Tags</a></li>
<li><a href="#"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
</ul>Output will become,
Conclusion
In this article, we discussed on simple Tabs and Pills that are used to create menu bars in the Web applications. Hope you understand. Please read the continuation of this topic in next article. If you have any questions in this chapter, please feel free to comment below.
Thanks for reading.