Bootstrap Navs, Bootstrap Menu, Basic Nav menu, Aligned Nav Menu, Nav Menu Right Side, Vertical Nav Menu, Bootstrap Tabs, Bootstrap Pills, Bootstrap Pills with Dropdown, Bootstrap Tabs with Dropdown. Toggleable or Dynamic Tabs, Toggleable Or Dynamic Pills

Bootstrap Navs, Bootstrap Menu

Bootstrap provide best and easy solution for navs. Before we have to use long css or java script to create navs for website. In this article i am going to teach you how you can create navs for your website with Bootstrap.

Basic Nav menu

By default nav menu are horizontal. You have to add .nav class in your <ul> element and then add .nav-item in each <li> element after that for hyper link use .nav-link class.

Example:- 

<h2>Basic Nav Menu</h2>
  
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Menu-1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Menu-2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Menu-3</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Menu-4</a>
    </li>
  </ul>

Aligned Nav Menu

If you want your nav menu should look in center left or right you can align your nav menu by using Bootstrap class .justify-content-center or .justify-content-end. You no need to use any class for keep nav menu left side because by default nav menu always left.

Example:-

Nav Menu Center
<ul class="nav justify-content-center">
    <li class="nav-item">
      <a class="nav-link" href="#">Menu-1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Menu-2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Menu-3</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Menu-4</a>
    </li>
  </ul>

Nav Menu Right Side

  <ul class="nav justify-content-end">
    <li class="nav-item">
      <a class="nav-link" href="#">Menu-1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Menu-2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Menu-3</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Menu-4</a>
    </li>
  </ul>

Vertical Nav Menu

Sometimes you need vertical nav menu. To create vertical nav menu you have add .flex-column class.

Example:- 

<h2>Vertical Nav Menu</h2>
  <ul class="nav flex-column">
    <li class="nav-item">
      <a class="nav-link" href="#">Menu-1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Menu-2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Menu-3</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Menu-4</a>
    </li>
  </ul>

Bootstrap Tabs

Now next thing is Tabs. You can make your nav menu into navigation tabs by using .nav-tabs Bootstrap class and to make your current or active menu active just add .active class.

Example:- 

<h2>Tabs</h2>
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" href="#">Menu-1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Menu-2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Menu-3</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Menu-4</a>
    </li>
  </ul>

Bootstrap Pills

You can turn your nav menu into pills also to make more good. To create pill you have to add .nav-pills in your <ul> element.

Example:- 

<h2>Pills</h2>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active" href="#">Menu-1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Menu-2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Menu-3</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Menu-4</a>
    </li>
  </ul>

Bootstrap Pills with Dropdown

Next step is pills with dropdown because most of time we need dropdown menu for our website. Follow the example how to make dropdown.

Example:- 

<h2>Pills with Dropdown</h2>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active" href="#">Menu-1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Menu-2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Menu-3</a>
    </li>
    <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">item 1</a>
      <a class="dropdown-item" href="#">item 2</a>
      <a class="dropdown-item" href="#">item 3</a>
    </div>
  </li>
  </ul>

Bootstrap Tabs with Dropdown

As we use dropdown with pills we can use dropdown with Tabs also.

Example:- 

<h2>Tabs with Dropdown</h2>
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" href="#">Menu-1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Menu-2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Menu-3</a>
    </li>
    <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">item 1</a>
      <a class="dropdown-item" href="#">item 2</a>
      <a class="dropdown-item" href="#">item 3</a>
    </div>
  </li>
  </ul>

Toggleable or Dynamic Tabs

To create tabs dynamic you have to use data-toggle="tab" attribute in each links. Then add .tab-pane class with unique ID for every tab and keep data inside a <div> element with class .tab-content.

Example:- 

<h2>Toggleable Or Dynamic Tabs</h2>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#menu1">Menu-1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu2">Menu-2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu3">Menu-3</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div id="menu1" class="container tab-pane active"><br>
      <h3>Menu-1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu2" class="container tab-pane fade"><br>
      <h3>Menu-2</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu3" class="container tab-pane fade"><br>
      <h3>Menu-3</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
  </div>

Toggleable Or Dynamic Pills

As we create dynamic tabs we can create dynamic pills also. You have to change only data-toggle attribute into data-toggle="pill"

Example:- 

<h2>Toggleable Or Dynamic Pills</h2>
  <!-- Nav tabs -->
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="pill" href="#menu1">Menu-1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="pill" href="#menu2">Menu-2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="pill" href="#menu3">Menu-3</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div id="menu1" class="container tab-pane active"><br>
      <h3>Menu-1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu2" class="container tab-pane fade"><br>
      <h3>Menu-2</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu3" class="container tab-pane fade"><br>
      <h3>Menu-3</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
  </div>