YouTip

In this tutorial, you will learn how to use the Bootstrap toolkit to create navigation based on tabs, pills, and tabbed navigation. We provide demonstration examples with corresponding explanations, including: basic tab-based and pill-based navigation, stacked or vertical tab-based and pill-based navigation, dropdown menus for tabs and pills, creating stacked navigation using navigation lists, and creating clickable navigation (with different orientations) using JavaScript. ## Basic Tabs Two CSS classes, `.nav` and `.nav-tabs`, are used to create basic tab-based navigation. In Bootstrap version v2.0.1, the styles for the CSS class `.nav` are declared on lines 2176–2220 (which also include some related styles). Lines 2222–2267 contain the styles for `.nav-tabs`. The example below demonstrates how to create basic tab-based navigation using Bootstrap. ## Example ## Output  ## Live Preview [View the above example in a separate browser window.](#) Once you understand how to create basic tab-based navigation using Bootstrap, creating basic pill-based navigation becomes straightforward. Instead of using the `.nav-tabs` class, use the `.nav-pills` class. The styles for `.nav-pills` are located on lines 2222–2224 in bootstrap.css, and are repeated again on lines 2268–2280 in bootstrap.css (used in the final example). The example below demonstrates how to create basic pill-based navigation. ## Bootstrap Basic Pill-Based Navigation Example ## Example ## Output  ## Live Preview [View the above example in a separate browser window.](#) To create stacked or vertical tab-based navigation, you must add the `.nav-stacked`, `.nav`, and `.nav-tabs` classes to your markup; by default, horizontal tab-based navigation is created. Lines 2281–2309 contain the styles for `.nav-stacked`. Below is an example. ## Bootstrap Stacked or Vertical Tab-Based Navigation Example ## Example ## Output  ## Live Preview [View the above example in a separate browser window.](#) Similar to creating stacked or vertical tabs, you need an additional CSS class to create stacked or vertical pill-based navigation—namely, the `.nav-stacked` class, whose styles are located on lines 2281–2309. Below is an example. ## Bootstrap Stacked or Vertical Pill-Based Navigation Example ## Example ## Output  ## Live Preview [View the above example in a separate browser window.](#) You can use Bootstrap to create tab-based dropdown menu navigation. Four CSS classes—`.dropdown`, `.dropdown-toggle`, `.dropdown-menu`, and `.caret`—are required, in addition to the `.nav` and `.nav-tabs` classes. In bootstrap.css (version 2.0.1), lines 1545–1547 contain the styles for the `.dropdown` class; lines 1548–1553 contain those for `.dropdown-toggle`; lines 1576–1632 contain those for `.dropdown-menu`; and lines 1554–1575 contain those for `.caret`. Another CSS class, `.divider`, is used in the demo example but is not mandatory. Of course, you need to reference three JavaScript files in your HTML file—`jquery.js`, `bootstrap-dropdown.js`, and `application.js`. All of these reside in the `docs/assets/js/` folder. Below is an example. ## Bootstrap Tab-Based Dropdown Menu Navigation Example ## Example .container { margin-top: 200px; } Note: We added a separate `` tag and referenced it in a small set of styles to create a 200-pixel top margin for the container—this is only for demonstration purposes. `data-toggle` is a Bootstrap-specific attribute. Setting its value to `"dropdown"` creates a dropdown menu navigation. ## Output Tab-based dropdown menu:  Tab-based dropup menu: ![Image 6: dropup-tabbased](https://w