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 Bootstrap 4 – Responsive Web Design now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial