Twitter Bootstrap offers some tools that make it very easy to create navigation lists. This article will cover some of the simpler uses of the nav-tabs and nav-pills classes for unordered lists. Bootstraps CSS will handle the basic styling for you. More advanced uses such as tabs that dynamically update display on the same page when clicked require more extensive jQuery and will be explained in a more advanced article.

Goal

This post will show you how to make a layout such as in the image below.

Before you get started

Remember, the UI elements presented in today’s article goes inside a Twitter Bootstrap container. If you need to download bootstrap, get it from github, and look at our introductory article.

Creating Pills

Creating pills, as in the left div pictured above is pretty straight-forward. You’ll need to create a an unordered list with a class of “nav nav-pills” and then put list items inside it. Whichever li you set to class=”active” will be solid and the others will be the background color. You’ll get a nice hover effect that will highlight the link under your mouse cursor, too. This is the code that generated the pills in our example:

Creating Tabs

Creating tabs is nearly identical to creating pills. The only difference is that the unordered list is of class=”nav nav-tabs”.


Creating a Dropdown

Dropdowns are a bit more complicated. Each one is a list item that can fit inside tabs, pills or other lists. Inside the dropdown li, you’ll have a link for the toggle, inside of which you can add a caret symbol, and then an unordered list with the items to appear inside the dropdown. See this simple example that will create a dropdown with only two items:

Adding a divider to the dropdown

We can create a divider in the middle of the list by adding an empty li with class=”divider”. Here’s a look at the entire set of tabs and the dropdown displayed in the image at the top of this article.

Right-click and save the html/js source for this tutorial:
myTabsPillsDropdown and experiment with it! Don’t forget that you’ll need to include the bootstrap css and js files mentioned above to see it render properly.