Bootstrap Navigation Elements

Bootstrap is offering a small number of different options for styling navigation elements. This tutorial is all about that we will discuss here briefly. Bootstrap have shared markup, starting with the base .nav class. Bootstrap also offers a helper class, to share markup and states. Swap modifier classes to switch between each style.

Tabular Navigation or Tabs

To make a tabbed navigation menu follow these steps:

  • Start by an essential unordered list with the base class of .nav

  • Then put the class .nav-tabs.

Pills Navigation

Basic pills

To change your tabs into pills, follow the same steps as above and use the class .nav-pills instead of .nav-tabs. Same like this following example code.

Verticle Pills

You can make the pills vertically by using this class .nav-stacked next to the classes .nav, .nav-pills. Following vertical pills example demonstrates this:

Justified Nav

You can easily create tabs or pills equal widths of their parent at screens wider than 768px using class .nav-justified along with .nav, .nav-tabs or .nav, .nav-pills respectively. On smaller screens, the nav links are stacked.

Disabled Links

For any of nav component like tabs or pills, if you add the .disabled, this will make gray links and remove the hover effects as shown in the following example.

This class will only change the <a>’s appearance, not its functionality. Use custom JavaScript to disable links here.


Navigation menus share with dropdown menus a related code of syntax. By default a list item has an anchor working in combination of some data-attributes to trigger that list with a .dropdown-menu class.

Tabs with Dropdowns

Follow these steps to add dropdowns with tab:

  • Start by an essential unordered list with the base class of .nav

  • Then put the class .nav-tabs.

  • Add one more an unordered list with a .dropdown-menu class.

Pills with Dropdowns

If you want to do same thing like above with pills there is simple way, swap the .nav-tabs class with .nav-pills as shown in the following example.

Leave a Reply

Your email address will not be published. Required fields are marked *