How to use the Navs component

The Navs component in Bootstrap can be displayed in a couple of different ways. The default view for the component is just a simple unstyled list of links. This list can also be transformed into tabs or pills for ways of organizing your content and navigation. Let's start by learning how to create a default Nav component:

<ul class="nav"> 
  <li class="nav-item"> 
    <a class="nav-link" href="#">Link 1</a> 
  </li> 
  <li class="nav-item"> 
    <a class="nav-link" href="#">Link 2</a> 
  </li> 
  <li class="nav-item"> 
    <a class="nav-link" href="#">Link 3</a> 
  </li> 
</ul> 

The most basic version of the Nav component is built using the preceding code:

  • The component is based on an unordered list with a class of .nav
  • Each <li> tag in the list requires ...

Get Learning Bootstrap 4 - Second Edition now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.