Loading…

What is Bootstrap Tabs and Pills?

Majority of the web pages have a menu. The menu is displayed with the help of Bootstrap Tabs and Pills. The Menu is mostly defined in a <ul> tag which is an unordered list tag. Tab and pills are the different styles to shows menus according to functionality.

Bootstrap Tabs:-Tabs are useful for showing different content which is not to be displayed at one time in one place. When users want to navigate they can use Tabs for browsing.

The bootstrap Tabs are created with <ul class="nav nav-tabs">. The current page can be marked with <li class="active">.

Bootstrap Pills:- pills give the effect of buttons on the menu. So users feel that they are using a button instead of a hyperlink. We can use pills for navigation purpose.

The Bootstrap pills are created with <ul class="nav nav-pills">

Example

                                        

To create navigation Bootstrap tabs:-

<ul class="nav nav-tabs">

     <li class="active"><a href="#">Home Page</a></li>

     <li><a href="#">Page 1</a></li>

     <li><a href="#">Page 2</a></li>

     <li><a href="#">Page 3</a></li>

</ul>

Tabs can also have the drop-down menus to show

Example:- To create Bootstrap Pills

<ul class="nav nav-pills">

     <li class="active"><a href="#">Home Page</a></li>

     <li><a href="#">Page 1</a></li>

     <li><a href="#">Page 2</a></li>

     <li><a href="#">Page 3</a></li>

</ul>

Suggest An Answer

No suggestions avaliable!

Latest post from Bootstrap 3 Interview Questions

Ask Question