Navs

Base nav
<ul class="nav">  <li class="nav-item">    <a class="nav-link active" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>  </li></ul>
Horizontal alignment
<ul class="nav justify-content-center">  <li class="nav-item">    <a class="nav-link active" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>  </li></ul><ul class="nav justify-content-end">  <li class="nav-item">    <a class="nav-link active" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>  </li></ul>
Vertical
<ul class="nav flex-column">  <li class="nav-item">    <a class="nav-link active" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>  </li></ul>
Tabs
<ul class="nav nav-tabs">  <li class="nav-item">    <a class="nav-link active" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>  </li></ul>
Pills
<ul class="nav nav-pills">  <li class="nav-item">    <a class="nav-link active" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>  </li></ul>
Fill and justify
<ul class="nav nav-pills nav-fill">  <li class="nav-item">    <a class="nav-link active" href="#">Active</a>  </li>  <li class="nav-item">    <a class="nav-link" href="#">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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>  </li></ul>
Tabs with dropdowns
<ul class="nav nav-tabs">  <li class="nav-item">    <a class="nav-link active" href="#">Active</a>  </li>  <li class="nav-item dropdown">    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"       aria-haspopup="true" aria-expanded="false">Dropdown</a>    <div class="dropdown-menu">      <a class="dropdown-item" href="#">Action</a>      <a class="dropdown-item" href="#">Another action</a>      <a class="dropdown-item" href="#">Something else here</a>      <div class="dropdown-divider"></div>      <a class="dropdown-item" href="#">Separated link</a>    </div>  </li>  <li class="nav-item">    <a class="nav-link" href="#">Link</a>  </li>  <li class="nav-item">    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>  </li></ul>
Pills with dropdowns
<ul class="nav nav-pills">  <li class="nav-item">    <a class="nav-link active" href="#">Active</a>  </li>  <li class="nav-item dropdown">    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"       aria-haspopup="true" aria-expanded="false">Dropdown</a>    <div class="dropdown-menu">      <a class="dropdown-item" href="#">Action</a>      <a class="dropdown-item" href="#">Another action</a>      <a class="dropdown-item" href="#">Something else here</a>      <div class="dropdown-divider"></div>      <a class="dropdown-item" href="#">Separated link</a>    </div>  </li>  <li class="nav-item">    <a class="nav-link" href="#">Link</a>  </li>  <li class="nav-item">    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>  </li></ul>