Bootstrap - Navs

Bootstrap

← Prev Next →

In this tutorial we will learn about navs in Bootstrap.

We use the .nav class to create navs in Bootstrap.

Simple nav tabs

To create a simple nav tabs we use the .nav-tabs class.

For tabs with tabbable areas, include the tab JavaScript plugin.

<ul class="nav nav-tabs">
  <li role="presentation"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">About</a></li>
  <li role="presentation"><a href="#">Contact us</a></li>
</ul>

Output:

We can select a tab by adding the .active class.

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">About</a></li>
  <li role="presentation"><a href="#">Contact us</a></li>
</ul>

Output:

Nav pills

To create nav pills we use the .nav-pills class.

<ul class="nav nav-pills">
  <li role="presentation"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">About</a></li>
  <li role="presentation"><a href="#">Contact us</a></li>
</ul>

Output:

We can also add the .active class to select a tab.

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">About</a></li>
  <li role="presentation"><a href="#">Contact us</a></li>
</ul>

Output:

We can even stack the nav pills using the .nav-stacked class.

<ul class="nav nav-pills nav-stacked">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">About</a></li>
  <li role="presentation"><a href="#">Contact us</a></li>
</ul>

Output:

Justified navs

We use the .nav-justified class to make the tabs and pills equal widths of their parent for screen size wider than 768px. For smaller screen the nav links are stacked.

<ul class="nav nav-tabs nav-justified">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">About</a></li>
  <li role="presentation"><a href="#">Contact us</a></li>
</ul>

Output:

<ul class="nav nav-pills nav-justified">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">About</a></li>
  <li role="presentation"><a href="#">Contact us</a></li>
</ul>

Output:

Disabled nav link

We can add the .disabled class to disable a nav link.

<ul class="nav nav-pills">
  <li role="presentation"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">About</a></li>
  <li role="presentation" class="disabled"><a href="#">Contact us</a></li>
</ul>

Output:

Adding dropdowns to nav tabs and pills

We can even add .dropdown inside a .nav-pills and .nav-tabs.

Use the dropdowns JavaScript plugin when creating dropdowns.

<ul class="nav nav-pills">
  <li role="presentation"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">About</a></li>
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      More Menu <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
    </ul>
  </li>
</ul>

Output:

← Prev Next →