Navs
Documentation and examples of how to use Bootstrap’s included navigation components.
Navs on BootstrapHorizontal
<ul class="nav">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Active</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link disabled">Disabled</a></li>
</ul>Vertical
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Active</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link disabled">Disabled</a></li>
</ul>Pills
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Active</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link disabled">Disabled</a></li>
</ul>Fill and justify
<ul class="nav nav-pills nav-fill mb-4">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Active</a></li>
<li class="nav-item"><a class="nav-link" href="#">Much longer nav link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link disabled">Disabled</a></li>
</ul>
<ul class="nav nav-pills nav-justified">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Active</a></li>
<li class="nav-item"><a class="nav-link" href="#">Much longer nav link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link disabled">Disabled</a></li>
</ul>
