Nav align

Positions a secondary navigation bar at the very top of the interface.

Top

Content

<nav class="navbar navbar-expand bg-dark mb-3 py-0" data-bs-theme="dark">
  <div class="container-fluid">
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav navbar-nav-top flex-column">
        <li class="nav-item"><a class="nav-link" href="#">Item 1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
      </ul>
    </div>
  </div>
</nav>

Class list

Breakpoint	Class
Extra small	`.navbar-nav-top`
Small	`.navbar-nav-sm-top`
Medium	`.navbar-nav-md-top`
Large	`.navbar-nav-lg-top`
Extra large	`.navbar-nav-xl-top`
2 Extra large	`.navbar-nav-xxl-top`
3 Extra large	`.navbar-nav-3xl-top`
4 Extra large	`.navbar-nav-4xl-top`
5 Extra large	`.navbar-nav-5xl-top`

Bottom

Content

<nav class="navbar navbar-expand bg-dark mb-3 py-0" data-bs-theme="dark">
  <div class="container-fluid">
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav navbar-nav-bottom flex-column">
        <li class="nav-item"><a class="nav-link" href="#">Item 1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
      </ul>
    </div>
  </div>
</nav>

Class list

Breakpoint	Class
Extra small	`.navbar-nav-bottom`
Small	`.navbar-nav-sm-bottom`
Medium	`.navbar-nav-md-bottom`
Large	`.navbar-nav-lg-bottom`
Extra large	`.navbar-nav-xl-bottom`
2 Extra large	`.navbar-nav-xxl-bottom`
3 Extra large	`.navbar-nav-3xl-bottom`
4 Extra large	`.navbar-nav-4xl-bottom`
5 Extra large	`.navbar-nav-5xl-bottom`

Start

Content

<nav class="navbar navbar-expand bg-dark mb-3" data-bs-theme="dark">
  <div class="container-fluid">
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav navbar-nav-start">
        <li class="nav-item"><a class="nav-link" href="#">Item 1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
      </ul>
    </div>
  </div>
</nav>

Class list

Breakpoint	Class
Extra small	`.navbar-nav-start`
Small	`.navbar-nav-sm-start`
Medium	`.navbar-nav-md-start`
Large	`.navbar-nav-lg-start`
Extra large	`.navbar-nav-xl-start`
2 Extra large	`.navbar-nav-xxl-start`
3 Extra large	`.navbar-nav-3xl-start`
4 Extra large	`.navbar-nav-4xl-start`
5 Extra large	`.navbar-nav-5xl-start`

End

Content

<nav class="navbar navbar-expand bg-dark mb-3" data-bs-theme="dark">
  <div class="container-fluid">
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav navbar-nav-end">
        <li class="nav-item"><a class="nav-link" href="#">Item 1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
      </ul>
    </div>
  </div>
</nav>

Class list

Breakpoint	Class
Extra small	`.navbar-nav-end`
Small	`.navbar-nav-sm-end`
Medium	`.navbar-nav-md-end`
Large	`.navbar-nav-lg-end`
Extra large	`.navbar-nav-xl-end`
2 Extra large	`.navbar-nav-xxl-end`
3 Extra large	`.navbar-nav-3xl-end`
4 Extra large	`.navbar-nav-4xl-end`
5 Extra large	`.navbar-nav-5xl-end`