How to create Tabs and Pills in Bootstrap Part-2

Posted by Krishna Vamshi Goud in Bootstrap category on 6/10/2014 for Beginner level | Points: 250 | Views : 8893

Rating: 4 out of 5

1 vote(s)

Post Article |

Search Articles |

Articles Home

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.

About the Author

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

Bookmark It

Login to vote for this post.

Latest Articles

Comments or Responses

Comment using

(Author doesn't get notification)