Bootstrap’s Navs and Tabs component depicts basic navigation onto the next page using tabs present on the home screen. To add navigation over the page, just add the .nav parameter into the class.  It includes the process of building different navigating components. 

For example,

<ul class="nav">

  <li class="nav-item">

    <a class="nav-link home" aria-current="page" href="#">Home</a>

  </li>

  <li class="nav-item">

    <a class="nav-link-example" href="#">Link Example</a>

  </li>

  <li class="nav-item">

    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>

  </li>

</ul>

In the above example, using the .nav attribute the tabs are arranged along with the anchor tag. Depending upon the requirements, you can either include the navigation within the ordered list or the unordered list. 

There are several styling available for setting up the navigation tabs. You can use the utilities to align it vertically as well as horizontally. To align it, you need to use the .justify-content-center. You can even structure the navigation tabs in the form of dropdowns or toggles, lists, etc. 

For adding the navigation vertically, it’s simple to add the .flex-column utility and include the contents into it. 

For example,

<ul class="nav flex-column">

  <li class="nav-item">

    <a class="nav-link active" aria-current="page" href="#">Active</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" href="#">Link</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" href="#">Link</a>

  </li>

  <li class="nav-item">

    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>

  </li>

</ul>