Getting Started
Components
Utilities
Navs
Examples for how to use Bootstrap's included navigation components.
Basic example
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="javascript: void(0);">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript: void(0);">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript: void(0);">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="javascript: void(0);" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>Tabs
Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface.
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="javascript: void(0);">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript: void(0);">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript: void(0);">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="javascript: void(0);" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>Pills
Take that same HTML, but use .nav-pills instead.
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="javascript: void(0);">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript: void(0);">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript: void(0);">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="javascript: void(0);" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>