Search within TutorialsPark

Twitter Bootstrap Navigations and Pills


To create well styled Navigation Tabs and Pills


Twitter Bootstrap:Navigation Tabs

1. To create a tabbed navigation use class .nav-tabs with the base class .nav element.

Example: Twitter Bootstrap Navigation Tabs

Give it a TRY! »

Twitter Bootstrap: Navigation Pills

1. To create a pills navigation use class .nav-pills with the base class .nav element.

Example:Twitter Bootstrap Navigation Pills

Give it a TRY! »

Twitter Bootstrap: Stacked Navigation Pills

1. To create a vertically stacked pills navigation use class .nav-pills and nav-stacked with the base class .nav element.

Example:Twitter Bootstrap Vertically Stacked Navigation Pills

Give it a TRY! »

Twitter Bootstrap: Justifed Navigation Tabs and Pills

1. In order to make tabs and pills equal to the width of the parent element, when viewed on screen wider than 768px use class .nav-justified.

2. When the same navigation is viewed on smaller screen devices, the links appear stacked.

Example:Twitter Bootstrap Justified Navigation Tabs and Pills

Give it a TRY! »

Twitter Bootstrap: Disabled Navigation links

1. Any component of the navigation can be disabled using the class .disabled. The disabled link appears grey in color with no hover effects.

Example:Twitter Bootstrap Disabled navigation links

Give it a TRY! »

Twitter Bootstrap: Navigation with Drop Down

1.A dropdown navigation can be created using the class .nav-tabs , .dropdown , .dropdown-toggle and .caret .

2. The Demo below illustrates the feature in great detail.

Example:Twitter Bootstrap Navigation with DropDowns

Give it a TRY! »

Twitter Bootstrap: Navigation Pills with Dropdowns

1. The same implementation as above can be preformed on pill naviagtion.

Example:Twitter Bootstrap Navigation Pills with Drop Downs

Give it a TRY! »