How to create Tabs and Pills in Bootstrap Part-1

Goud.Kv
Posted by in Bootstrap category on for Beginner level | Points: 250 | Views : 7201 red flag
Rating: 5 out of 5  
 2 vote(s)

Bootstrap is the CSS technology developed by Twitter. It comes with predefined styles that are used straightly to make our webpage nice look and feel.
Bootstrap contains a bunch of CSS code which is usable at any place.
Recommendation
Read Working with Images in Bootstrap before this article.

Introduction

Please read Bootstrap Introduction 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.


Recommendation
Read How to create Tabs and Pills in Bootstrap Part-2 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)