Tabs align

Horizontal tabs located at the base of a container, ideal for mobile apps.

Bottom

<ul class="nav nav-tabs nav-tabs-bottom">
  <li class="nav-item"><a class="nav-link active" 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>

Start

<div class="row">
  <div class="col-12 col-md-4">
    <ul class="nav nav-tabs nav-tabs-md-start">
      <li class="nav-item"><a class="nav-link active" 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>

Class list

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

End

<div class="row">
  <div class="col-12 col-md-4">
    <ul class="nav nav-tabs nav-tabs-md-end nav-tabs-bottom">
      <li class="nav-item"><a class="nav-link active" 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>

Class list

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