← all Bootstrap classes list

Bootstrap class: .nav-fill

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
</ul>

Preview

Tips 💡

You don't need to remember all CSS classes. Just use the Bootstrap Editor instead.

Sass source

/* _nav.scss:91 */
.nav-fill {
  .nav-item {
    flex: 1 1 auto;
    text-align: center;
  }
}

Uses variables

Code copied to the clipboard.

Copying failed

/* _nav.scss:91 */

More in Bootstrap Navs

Bootstrap 4 & 5
Tailwind