Bootstrap - Standard Navigation Elements

Navigation systems in Bootstrap are called navs. You use the base .nav class on the container element to create a nav. In HTML5 you should start with the <nav> element to define the navigation. This element can define navigation for the entire site, the page, or even just the section it’s in. Include a role="navigation" attribute on the <nav> element so your navigation is accessible. Your navigation will be in a list element such as <ul>, and each item will be an <li> element with a link (<a>).

The two types of standard navigation are:

  • .nav-pills—Creates a small button for each navigation item
  • .nav-tabs—Turns the navigation elements into simple tabs

Try it Yourself: Build a Simple Navigation in Bootstrap

Listing 12.1 - HTML for Tabbed Navigation

Listing 12.2 - Two-Column Layout with Stacked Pills Navigation

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam dolor sit amet erat porta auctor. Etiam eu ultrices orci, at tincidunt metus. Nunc at mauris rutrum, consectetur tellus ut, porttitor justo. Aenean vitae bibendum risus. Proin eros elit, lobortis et metus at, imperdiet tristique velit.

Using .nav-justified for both tabs and pills

Using pills:

Now, using tabs:

(End of examples of Navigation element styles, Part 1.)