Bootstrap Tabs and Pills

Bootstrap Menus

Menus have become a usual part of any website now. A simple HTML menu is the one made with an unordered list <ul>.

It is styled further, as per the web-page requirements, and displayed to the user.

Bootstrap would help you create a horizontal menus with the help of the .list-inline class.

You can add this class to your <ul> tag and you are ready for a basic menu for your website.

    ...

But this post isn’t about those menus. Here, we will discuss what we call Tabs and Pills.

These are better styled menus that Bootstrap offers us.

Bootstrap Creating a Tab

To create a tab you need to use to use the class= “nav nav-tabs” attribute with your ul element.

Check out the example below:

You can also use the .active class to highlight the active menu.

Bootstrap Tabs With Dropdown Menu

You might have sub-menus for your menus. These can be displayed as dropdowns for each menu.

See the sample code below for illustration:

 Bootstrap Pills

To create pills you need to set your <ul> element as <ul class="nav nav-pills">.

The current page will be active, which can be done by <li class="active">:

Bootstrap Vertical Pills

For vertical alignment of the pills you need to add the .nav-stacked class.

Bootstrap Pills with dropdown menus

You can also make the Pills hold dropdown menus.

Here’s an example for the same:

Bootstrap Centered Tabs and Pills

The .nav-justified class will help making the pills centered or justified

Bootstrap Toggleable / Dynamic Tabs

Adding the data-toggle="tab" attribute will make the tabs toggleable.

You can also use the .tab-pan and .tab-content classes for better content wrapping




  

    
HOME

    
Some content.