How to create Tabs and Pills in Bootstrap Part-2

Goud.Kv
Posted by in Bootstrap category on for Beginner level | Points: 250 | Views : 4332 red flag
Rating: 4 out of 5  
 1 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.
Recommendation
Read How to create Tabs and Pills in Bootstrap Part-1 before this article.

Introduction

Please read Bootstrap Introduction if you are new to Bootstrap.
This is the continuation of previous chapter How to create Tabs and Pills using Bootstrap part-1.
We have discussed simple Tabs and Pills in the previous chapter, now lets see dropdowns with them.

Objective

The main objective of this article is to learn Nav tabs and Pills with Dropdowns and Icons, Disabling the Nav element and Stacked Navs.

Using Bootstrap code

Tabs and Pills with Dropdown menus makes good attraction and easy surfing to the users. Lets see them briefly below

Creating Tabs and Pills with Dropdowns
Setting Dropdown for Tab or Pill elements is quite easy in Bootstrap. Lets see the below code snippet to make yourself easy to understand.
<ul class="nav nav-tabs">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">Gallery <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#">Photos</a></li>
                <li><a href="#">Music</a></li>
                <li><a href="#">Video</a></li>
                <li class="divider"></li>
                <li><a href="#">Settings</a></li>
            </ul>
        </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>
Run the above code in your browser and you will see the following output,


Now, change the class of ul in the above code to nav-pills like below.
<ul class="nav nav-pills">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">Gallery <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#">Photos</a></li>
                <li><a href="#">Music</a></li>
                <li><a href="#">Video</a></li>
                <li class="divider"></li>
                <li><a href="#">Settings</a></li>
            </ul>
        </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>
Output of the above code will gives the Pill nav with dropdown elements


Creating Tabs and Pills with Icons and Dropdowns
Lets set some Bootstrap Icons to the elements. Below example explains how to set Icons to each element.
<ul class="nav nav-tabs">
        <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span>  Home</a></li>
        <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle"><span class="glyphicon glyphicon-film"></span> Gallery<b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#"><span class="glyphicon glyphicon-picture"></span> Images</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-music"></span> Music</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-facetime-video"></span> Video</a></li>
                <li class="divider"></li>
                <li><a href="#"><span class="glyphicon glyphicon-wrench"></span> Settings</a></li>
            </ul>
        </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, we have used Glyphicons of Twitter Bootstrap to the Nav elements. Output of the above snip will be,


For the Pills type Nav(change the ul class),
<ul class="nav nav-pills">
        <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span>  Home</a></li>
        <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle"><span class="glyphicon glyphicon-film"></span> Gallery<b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#"><span class="glyphicon glyphicon-picture"></span> Images</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-music"></span> Music</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-facetime-video"></span> Video</a></li>
                <li class="divider"></li>
                <li><a href="#"><span class="glyphicon glyphicon-wrench"></span> Settings</a></li>
            </ul>
        </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>
Check out the above code in your browser and you will find the following result


Creating Stacked Tabs and Pills with Icons and Dropdowns
Adding nav-stacked to the ul class will do the job.

For Stacked Tab, See the below example
<ul class="nav nav-tabs nav-stacked">
        <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span>  Home</a></li>
        <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle"><span class="glyphicon glyphicon-film"></span> Gallery<b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#"><span class="glyphicon glyphicon-picture"></span> Images</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-music"></span> Music</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-facetime-video"></span> Video</a></li>
                <li class="divider"></li>
                <li><a href="#"><span class="glyphicon glyphicon-wrench"></span> Settings</a></li>
            </ul>
        </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 code will be,


For Stacked Pills, Go through below code(changing ul class)
<ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span>  Home</a></li>
        <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle"><span class="glyphicon glyphicon-film"></span> Gallery<b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#"><span class="glyphicon glyphicon-picture"></span> Images</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-music"></span> Music</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-facetime-video"></span> Video</a></li>
                <li class="divider"></li>
                <li><a href="#"><span class="glyphicon glyphicon-wrench"></span> Settings</a></li>
            </ul>
        </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 code will be,


Disabling links in the Nav components
Inorder to disable links of any Nav components, Bootstrap provides disabled class. Check the below example,
<ul class="nav nav-pills">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">User</a></li>
        <li><a href="#">Settings</a></li>
        <li class="disabled"><a href="#">Admin</a></li>
</ul>
In the above code, we have given disabled class to the Admin element. See the code in the browser


Conclusion

In this article, we have seen different Tabs and Pills of Nav elements with dropdowns as well as icons and also Disabling elements, stacked Navs. Hope you understand. If you have any doubts or confusions in this topic, please let me know by posting in the comment section below.

Thanks for reading.


Recommendation
Read How to create Menus in Bootstrap 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)