Nav size

Adjusts the specific scale of items inside the navbar independent of the container height.

Content

<nav class="navbar navbar-expand bg-dark px-0" data-bs-theme="dark">
  <div class="container-fluid">
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav navbar-nav-x-0 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

Horizontal	Vertical
`.navbar-nav-x-0`	`.navbar-nav-y-0`
`.navbar-nav-x-sm-0`	`.navbar-nav-y-sm-0`
`.navbar-nav-x-md-0`	`.navbar-nav-y-md-0`
`.navbar-nav-x-lg-0`	`.navbar-nav-y-lg-0`
`.navbar-nav-x-xl-0`	`.navbar-nav-y-xl-0`
`.navbar-nav-x-xxl-0`	`.navbar-nav-y-xxl-0`
`.navbar-nav-x-3xl-0`	`.navbar-nav-y-3xl-0`
`.navbar-nav-x-4xl-0`	`.navbar-nav-y-4xl-0`
`.navbar-nav-x-5xl-0`	`.navbar-nav-y-5xl-0`

Extra small

<nav class="navbar navbar-expand bg-dark" data-bs-theme="dark">
  <div class="container-fluid"><a class="navbar-brand" href="#">Nav 1</a>
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav navbar-nav-1">
        <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

Class	Horizontal	Vertical
`.navbar-nav-1`	`.navbar-nav-x-1`	`.navbar-nav-y-1`
`.navbar-nav-sm-1`	`.navbar-nav-x-sm-1`	`.navbar-nav-y-sm-1`
`.navbar-nav-md-1`	`.navbar-nav-x-md-1`	`.navbar-nav-y-md-1`
`.navbar-nav-lg-1`	`.navbar-nav-x-lg-1`	`.navbar-nav-y-lg-1`
`.navbar-nav-xl-1`	`.navbar-nav-x-xl-1`	`.navbar-nav-y-xl-1`
`.navbar-nav-xxl-1`	`.navbar-nav-x-xxl-1`	`.navbar-nav-y-xxl-1`
`.navbar-nav-3xl-1`	`.navbar-nav-x-3xl-1`	`.navbar-nav-y-3xl-1`
`.navbar-nav-4xl-1`	`.navbar-nav-x-4xl-1`	`.navbar-nav-y-4xl-1`
`.navbar-nav-5xl-1`	`.navbar-nav-x-5xl-1`	`.navbar-nav-y-5xl-1`

Small

<nav class="navbar navbar-expand bg-dark" data-bs-theme="dark">
  <div class="container-fluid"><a class="navbar-brand" href="#">Nav 2</a>
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav navbar-nav-2">
        <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

Class	Horizontal	Vertical
`.navbar-nav-2`	`.navbar-nav-x-2`	`.navbar-nav-y-2`
`.navbar-nav-sm-2`	`.navbar-nav-x-sm-2`	`.navbar-nav-y-sm-2`
`.navbar-nav-md-2`	`.navbar-nav-x-md-2`	`.navbar-nav-y-md-2`
`.navbar-nav-lg-2`	`.navbar-nav-x-lg-2`	`.navbar-nav-y-lg-2`
`.navbar-nav-xl-2`	`.navbar-nav-x-xl-2`	`.navbar-nav-y-xl-2`
`.navbar-nav-xxl-2`	`.navbar-nav-x-xxl-2`	`.navbar-nav-y-xxl-2`
`.navbar-nav-3xl-2`	`.navbar-nav-x-3xl-2`	`.navbar-nav-y-3xl-2`
`.navbar-nav-4xl-2`	`.navbar-nav-x-4xl-2`	`.navbar-nav-y-4xl-2`
`.navbar-nav-5xl-2`	`.navbar-nav-x-5xl-2`	`.navbar-nav-y-5xl-2`

Medium

<nav class="navbar navbar-expand bg-dark" data-bs-theme="dark">
  <div class="container-fluid"><a class="navbar-brand" href="#">Nav 3</a>
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav navbar-nav-3">
        <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

Class	Horizontal	Vertical
`.navbar-nav-3`	`.navbar-nav-x-3`	`.navbar-nav-y-3`
`.navbar-nav-sm-3`	`.navbar-nav-x-sm-3`	`.navbar-nav-y-sm-3`
`.navbar-nav-md-3`	`.navbar-nav-x-md-3`	`.navbar-nav-y-md-3`
`.navbar-nav-lg-3`	`.navbar-nav-x-lg-3`	`.navbar-nav-y-lg-3`
`.navbar-nav-xl-3`	`.navbar-nav-x-xl-3`	`.navbar-nav-y-xl-3`
`.navbar-nav-xxl-3`	`.navbar-nav-x-xxl-3`	`.navbar-nav-y-xxl-3`
`.navbar-nav-3xl-3`	`.navbar-nav-x-3xl-3`	`.navbar-nav-y-3xl-3`
`.navbar-nav-4xl-3`	`.navbar-nav-x-4xl-3`	`.navbar-nav-y-4xl-3`
`.navbar-nav-5xl-3`	`.navbar-nav-x-5xl-3`	`.navbar-nav-y-5xl-3`

Large

<nav class="navbar navbar-expand bg-dark" data-bs-theme="dark">
  <div class="container-fluid"><a class="navbar-brand" href="#">Nav 4</a>
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav navbar-nav-4">
        <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

Class	Horizontal	Vertical
`.navbar-nav-4`	`.navbar-nav-x-4`	`.navbar-nav-y-4`
`.navbar-nav-sm-4`	`.navbar-nav-x-sm-4`	`.navbar-nav-y-sm-4`
`.navbar-nav-md-4`	`.navbar-nav-x-md-4`	`.navbar-nav-y-md-4`
`.navbar-nav-lg-4`	`.navbar-nav-x-lg-4`	`.navbar-nav-y-lg-4`
`.navbar-nav-xl-4`	`.navbar-nav-x-xl-4`	`.navbar-nav-y-xl-4`
`.navbar-nav-xxl-4`	`.navbar-nav-x-xxl-4`	`.navbar-nav-y-xxl-4`
`.navbar-nav-3xl-4`	`.navbar-nav-x-3xl-4`	`.navbar-nav-y-3xl-4`
`.navbar-nav-4xl-4`	`.navbar-nav-x-4xl-4`	`.navbar-nav-y-4xl-4`
`.navbar-nav-5xl-4`	`.navbar-nav-x-5xl-4`	`.navbar-nav-y-5xl-4`