About Lesson
Navigation with Tabs & Pills
- .nav-tabs → Displays tab-style navigation
- .nav-pills → Displays button-style navigation
Example: Tabs Navigation
HTML
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
Output:
Example: Pills Navigation
HTML
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Support</a>
</li>
</ul>
Output:
Explanation:
- .nav-tabs → Creates underlined tabs.
- .nav-pills → Creates button-style navigation.
Assignment:
Convert a horizontal menu into a pills-style navigation.