Bootstrap

About Lesson

Justified & Centered Navigation

.nav-justified → Makes all links equal width
.justify-content-center → Centers navigation

Example: Justified Navigation

HTML

 <ul class="nav nav-pills nav-justified">
    <li class="nav-item">
      <a class="nav-link active" href="#">Dashboard</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Reports</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Settings</a>
    </li>
  </ul>

Output:

Example: Centered Navigation

HTML

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">About</a>
  </li>
</ul>

Output:

Explanation:

.nav-justified equally spaces items.
.justify-content-center centers the nav.