O'Reilly logo

Learning Bootstrap 4 - Second Edition by Matt Lambert

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required