Navs

Bootstrap comes with multiple navigation components that we have restyled inside the Lazy Kit. If you want to find out more about how to create navs, check out our Bootstrap 4 navs tutorial where we go into details.

Nav Tabs

You can create a navigation tab adding the .nav-tabs class to a .nav list and the .nav-item class to each element from the list.

<ul class="nav nav-tabs d-flex flex-column flex-md-row text-center">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

You can change the colour of the tabs by using the contextual classes .nav-[context]. Here is an example for a green (success) tabs.

<ul class="nav nav-success nav-tabs d-flex flex-column flex-md-row text-center">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home">
      <i class="fas fa-tshirt"></i> Shirts
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile">
      <i class="fas fa-shoe-prints"></i> Shoes
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">
      <i class="far fa-stop-circle"></i> Disabled
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile">
      <i class="fas fa-socks"></i> Socks
    </a>
  </li>
</ul>

If you want to use only icons in the tabs, you can make them larger, by adding the .nav-icons class.

  <ul class="nav nav-info nav-icons nav-tabs d-flex flex-column flex-md-row text-center">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#home">
        <i class="fas fa-chess-queen"></i>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#profile">
        <i class="fas fa-chess-rook"></i>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">
        <i class="fas fa-chess-king"></i>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#profile">
        <i class="fas fa-chess-knight"></i>
      </a>
    </li>
  </ul>

Nav Pills

You can create a navigation tab adding the .nav-pills class to a .nav list and the .nav-item class to each element from the list.

<ul class="nav nav-pills nav-secondary d-flex flex-column flex-md-row text-center">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home2">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile2">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" data-toggle="tab" href="#profile2">Dashboard</a>
  </li>
</ul>

Changing the color of the pills is the same as with tabs. You can use the contextual classes .nav-[context].

<ul class="nav nav-pills nav-warning d-flex flex-column flex-md-row text-center">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home2"> <i class="fas fa-igloo"></i> Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile2"><i class="fas fa-address-card"></i> Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" data-toggle="tab" href="#profile2"><i class="fas fa-chart-line"></i> Dashboard</a>
  </li>
</ul>

If you want to use only icons in the pills, you can make them larger, by adding the .nav-icons class.

<ul class="nav nav-pills nav-icons nav-info d-flex flex-column flex-md-row text-center">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home2"> <i class="fas fa-igloo"></i></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile2"><i class="fas fa-address-card"></i></a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" data-toggle="tab" href="#profile2"><i class="fas fa-chart-line"></i></a>
  </li>
</ul>