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.