Bootstrap 5 Learning Kit

XSXSSMSMMDMDLGLGXLXLXXLXXL
Extra small: <576pxSmall: ≥576pxMedium: ≥768pxLarge: ≥992pxExtra large: ≥1200pxExtra extra large: ≥1400px
Page Navigation:
Unordered listLinksNavs as navigation barHorizontal alignmentVerticalTabsPillsFillJustifyResponsiveDropdownTab panel with listTab panel without listVertical tab panelTab panel with fade effect

Navs and tabs

Unordered list

<ul class="nav">
  <li class="nav-item">
    <a href="#" class="nav-link active" aria-current="page">Active</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
<ul class="nav"> <li class="nav-item"> <a href="#" class="nav-link active" aria-current="page">Active</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Link</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Link</a> </li> <li class="nav-item"> <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul>

Links

<nav class="nav">
  <a href="#" class="nav-link active" aria-current="page">Active</a>
  <a href="#" class="nav-link">Link</a>
  <a href="#" class="nav-link">Link</a>
  <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
<nav class="nav"> <a href="#" class="nav-link active" aria-current="page">Active</a> <a href="#" class="nav-link">Link</a> <a href="#" class="nav-link">Link</a> <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a> </nav>

Navs as navigation bar

<nav>
  <ul class="nav">
    <li class="nav-item">
      <a href="#" class="nav-link active" aria-current="page">Active</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">Link</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">Link</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
    </li>
  </ul>
</nav>
<nav> <ul class="nav"> <li class="nav-item"> <a href="#" class="nav-link active" aria-current="page">Active</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Link</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Link</a> </li> <li class="nav-item"> <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> </nav>

Horizontal alignment

Centered

Right-aligned

<h4 class="h5 text-muted mt-3">Centered</h4>
<ul class="nav justify-content-center">
  <li class="nav-item">
    <a href="#" class="nav-link active" aria-current="page">Active</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
<h4 class="h5 text-muted mt-3">Right-aligned</h4>
<ul class="nav justify-content-end">
  <li class="nav-item">
    <a href="#" class="nav-link active" aria-current="page">Active</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
<h4 class="h5 text-muted mt-3">Centered</h4> <ul class="nav justify-content-center"> <li class="nav-item"> <a href="#" class="nav-link active" aria-current="page">Active</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Link</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Link</a> </li> <li class="nav-item"> <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> <h4 class="h5 text-muted mt-3">Right-aligned</h4> <ul class="nav justify-content-end"> <li class="nav-item"> <a href="#" class="nav-link active" aria-current="page">Active</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Link</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Link</a> </li> <li class="nav-item"> <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul>

Vertical

<ul class="nav flex-column">
  <li class="nav-item">
    <a href="#" class="nav-link active" aria-current="page">Active</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
<ul class="nav flex-column"> <li class="nav-item"> <a href="#" class="nav-link active" aria-current="page">Active</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Link</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Link</a> </li> <li class="nav-item"> <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul>

Tabs

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a href="#" class="nav-link active" aria-current="page">Active</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
<ul class="nav nav-tabs"> <li class="nav-item"> <a href="#" class="nav-link active" aria-current="page">Active</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Link</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Link</a> </li> <li class="nav-item"> <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul>

Pills

<ul class="nav nav-pills">
  <li class="nav-item">
    <a href="#" class="nav-link active" aria-current="page">Active</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
<ul class="nav nav-pills"> <li class="nav-item"> <a href="#" class="nav-link active" aria-current="page">Active</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Link</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Link</a> </li> <li class="nav-item"> <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul>

Fill

Unordered list

Links

<h4 class="h5 text-muted mt-3">Unordered list</h4>
<ul class="nav nav-tabs nav-fill">
  <li class="nav-item">
    <a href="#" class="nav-link active" aria-current="page">Active</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
<h4 class="h5 text-muted mt-3">Links</h4>
<nav class="nav nav-tabs nav-fill">
  <a href="#" class="nav-item nav-link active" aria-current="page">Active</a>
  <a href="#" class="nav-item nav-link">Link</a>
  <a href="#" class="nav-item nav-link">Link</a>
  <a href="#" class="nav-item nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
<h4 class="h5 text-muted mt-3">Unordered list</h4> <ul class="nav nav-tabs nav-fill"> <li class="nav-item"> <a href="#" class="nav-link active" aria-current="page">Active</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Link</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Link</a> </li> <li class="nav-item"> <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> <h4 class="h5 text-muted mt-3">Links</h4> <nav class="nav nav-tabs nav-fill"> <a href="#" class="nav-item nav-link active" aria-current="page">Active</a> <a href="#" class="nav-item nav-link">Link</a> <a href="#" class="nav-item nav-link">Link</a> <a href="#" class="nav-item nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a> </nav>

Justify

Unordered list

Links

<h4 class="h5 text-muted mt-3">Unordered list</h4>
<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a href="#" class="nav-link active" aria-current="page">Active</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
<h4 class="h5 text-muted mt-3">Links</h4>
<nav class="nav nav-pills nav-justified">
  <a href="#" class="nav-item nav-link active" aria-current="page">Active</a>
  <a href="#" class="nav-item nav-link">Link</a>
  <a href="#" class="nav-item nav-link">Link</a>
  <a href="#" class="nav-item nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
<h4 class="h5 text-muted mt-3">Unordered list</h4> <ul class="nav nav-pills nav-justified"> <li class="nav-item"> <a href="#" class="nav-link active" aria-current="page">Active</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Link</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Link</a> </li> <li class="nav-item"> <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> <h4 class="h5 text-muted mt-3">Links</h4> <nav class="nav nav-pills nav-justified"> <a href="#" class="nav-item nav-link active" aria-current="page">Active</a> <a href="#" class="nav-item nav-link">Link</a> <a href="#" class="nav-item nav-link">Link</a> <a href="#" class="nav-item nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a> </nav>

Responsive

<ul class="nav flex-column flex-md-row">
  <li class="nav-item">
    <a href="#" class="nav-link active" aria-current="page">Active</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
<ul class="nav flex-column flex-md-row"> <li class="nav-item"> <a href="#" class="nav-link active" aria-current="page">Active</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Link</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Link</a> </li> <li class="nav-item"> <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul>

Dropdown

<ul class="nav">
  <li class="nav-item">
    <a href="#" class="nav-link active" aria-current="page">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a href="#" class="dropdown-item">First item</a>
      <a href="#" class="dropdown-item">Second item</a>
      <a href="#" class="dropdown-item">Third item</a>
    </div>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
<ul class="nav"> <li class="nav-item"> <a href="#" class="nav-link active" aria-current="page">Active</a> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">Dropdown</a> <div class="dropdown-menu"> <a href="#" class="dropdown-item">First item</a> <a href="#" class="dropdown-item">Second item</a> <a href="#" class="dropdown-item">Third item</a> </div> </li> <li class="nav-item"> <a href="#" class="nav-link">Link</a> </li> <li class="nav-item"> <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul>

Tab panel with list

Panel 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.

Panel 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.

Panel 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item" role="presentation">
    <button type="button" id="tabList-1" class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabList-pane-1" role="tab" aria-controls="tabList-pane-1" aria-selected="true">Panel 1</button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" id="tabList-2" class="nav-link" data-bs-toggle="tab" data-bs-target="#tabList-pane-2" role="tab" aria-controls="tabList-pane-2" aria-selected="false">Panel 2</button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" id="tabList-3" class="nav-link" data-bs-toggle="tab" data-bs-target="#tabList-pane-3" role="tab" aria-controls="tabList-pane-3" aria-selected="false">Panel 3</button>
  </li>
</ul>
<div class="tab-content">
  <div id="tabList-pane-1" class="tab-pane active" role="tabpanel" aria-labelledby="tabList-1">
    <p>Panel 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.</p>
  </div>
  <div id="tabList-pane-2" class="tab-pane" role="tabpanel" aria-labelledby="tabList-2">
    <p>Panel 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.</p>
  </div>
  <div id="tabList-pane-3" class="tab-pane" role="tabpanel" aria-labelledby="tabList-3">
    <p>Panel 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.</p>
  </div>
</div>
<ul class="nav nav-tabs" role="tablist"> <li class="nav-item" role="presentation"> <button type="button" id="tabList-1" class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabList-pane-1" role="tab" aria-controls="tabList-pane-1" aria-selected="true">Panel 1</button> </li> <li class="nav-item" role="presentation"> <button type="button" id="tabList-2" class="nav-link" data-bs-toggle="tab" data-bs-target="#tabList-pane-2" role="tab" aria-controls="tabList-pane-2" aria-selected="false">Panel 2</button> </li> <li class="nav-item" role="presentation"> <button type="button" id="tabList-3" class="nav-link" data-bs-toggle="tab" data-bs-target="#tabList-pane-3" role="tab" aria-controls="tabList-pane-3" aria-selected="false">Panel 3</button> </li> </ul> <div class="tab-content"> <div id="tabList-pane-1" class="tab-pane active" role="tabpanel" aria-labelledby="tabList-1"> <p>Panel 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.</p> </div> <div id="tabList-pane-2" class="tab-pane" role="tabpanel" aria-labelledby="tabList-2"> <p>Panel 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.</p> </div> <div id="tabList-pane-3" class="tab-pane" role="tabpanel" aria-labelledby="tabList-3"> <p>Panel 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.</p> </div> </div>

Tab panel without list

Panel 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.

Panel 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.

Panel 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.

<nav>
  <div class="nav nav-tabs" role="tablist">
    <button type="button" id="tabButtons-1" class="nav-item nav-link active" data-bs-toggle="tab" data-bs-target="#tabButtons-pane-1" role="tab" aria-controls="tabButtons-pane-1" aria-selected="true">Panel 1</button>
    <button type="button" id="tabButtons-2" class="nav-item nav-link" data-bs-toggle="tab" data-bs-target="#tabButtons-pane-2" role="tab" aria-controls="tabButtons-pane-2" aria-selected="false">Panel 2</button>
    <button type="button" id="tabButtons-3" class="nav-item nav-link" data-bs-toggle="tab" data-bs-target="#tabButtons-pane-3" role="tab" aria-controls="tabButtons-pane-3" aria-selected="false">Panel 3</button>
  </div>
</nav>
<div class="tab-content">
  <div id="tabButtons-pane-1" class="tab-pane active" role="tabpanel" aria-labelledby="tabButtons-1">
    <p>Panel 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.</p>
  </div>
  <div id="tabButtons-pane-2" class="tab-pane" role="tabpanel" aria-labelledby="tabButtons-2">
    <p>Panel 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.</p>
  </div>
  <div id="tabButtons-pane-3" class="tab-pane" role="tabpanel" aria-labelledby="tabButtons-3">
    <p>Panel 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.</p>
  </div>
</div>
<nav> <div class="nav nav-tabs" role="tablist"> <button type="button" id="tabButtons-1" class="nav-item nav-link active" data-bs-toggle="tab" data-bs-target="#tabButtons-pane-1" role="tab" aria-controls="tabButtons-pane-1" aria-selected="true">Panel 1</button> <button type="button" id="tabButtons-2" class="nav-item nav-link" data-bs-toggle="tab" data-bs-target="#tabButtons-pane-2" role="tab" aria-controls="tabButtons-pane-2" aria-selected="false">Panel 2</button> <button type="button" id="tabButtons-3" class="nav-item nav-link" data-bs-toggle="tab" data-bs-target="#tabButtons-pane-3" role="tab" aria-controls="tabButtons-pane-3" aria-selected="false">Panel 3</button> </div> </nav> <div class="tab-content"> <div id="tabButtons-pane-1" class="tab-pane active" role="tabpanel" aria-labelledby="tabButtons-1"> <p>Panel 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.</p> </div> <div id="tabButtons-pane-2" class="tab-pane" role="tabpanel" aria-labelledby="tabButtons-2"> <p>Panel 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.</p> </div> <div id="tabButtons-pane-3" class="tab-pane" role="tabpanel" aria-labelledby="tabButtons-3"> <p>Panel 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.</p> </div> </div>

Vertical tab panel

Panel 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.

Panel 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.

Panel 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.

<div class="row">
  <div class="col-3">
    <ul class="nav flex-column nav-pills" role="tablist">
      <li class="nav-item" role="presentation">
        <button type="button" id="tabVertical-1" class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabVertical-pane-1" role="tab" aria-controls="tabVertical-pane-1" aria-selected="true">Panel 1</button>
      </li>
      <li class="nav-item" role="presentation">
        <button type="button" id="tabVertical-2" class="nav-link" data-bs-toggle="tab" data-bs-target="#tabVertical-pane-2" role="tab" aria-controls="tabVertical-pane-2" aria-selected="false">Panel 2</button>
      </li>
      <li class="nav-item" role="presentation">
        <button type="button" id="tabVertical-3" class="nav-link" data-bs-toggle="tab" data-bs-target="#tabVertical-pane-3" role="tab" aria-controls="tabVertical-pane-3" aria-selected="false">Panel 3</button>
      </li>
    </ul>
  </div>
  <div class="col-9">
    <div class="tab-content">
      <div id="tabVertical-pane-1" class="tab-pane active" role="tabpanel" aria-labelledby="tabVertical-1">
        <p>Panel 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.</p>
      </div>
      <div id="tabVertical-pane-2" class="tab-pane" role="tabpanel" aria-labelledby="tabVertical-2">
        <p>Panel 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.</p>
      </div>
      <div id="tabVertical-pane-3" class="tab-pane" role="tabpanel" aria-labelledby="tabVertical-3">
        <p>Panel 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.</p>
      </div>
    </div>
  </div>
</div>
<div class="row"> <div class="col-3"> <ul class="nav flex-column nav-pills" role="tablist"> <li class="nav-item" role="presentation"> <button type="button" id="tabVertical-1" class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabVertical-pane-1" role="tab" aria-controls="tabVertical-pane-1" aria-selected="true">Panel 1</button> </li> <li class="nav-item" role="presentation"> <button type="button" id="tabVertical-2" class="nav-link" data-bs-toggle="tab" data-bs-target="#tabVertical-pane-2" role="tab" aria-controls="tabVertical-pane-2" aria-selected="false">Panel 2</button> </li> <li class="nav-item" role="presentation"> <button type="button" id="tabVertical-3" class="nav-link" data-bs-toggle="tab" data-bs-target="#tabVertical-pane-3" role="tab" aria-controls="tabVertical-pane-3" aria-selected="false">Panel 3</button> </li> </ul> </div> <div class="col-9"> <div class="tab-content"> <div id="tabVertical-pane-1" class="tab-pane active" role="tabpanel" aria-labelledby="tabVertical-1"> <p>Panel 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.</p> </div> <div id="tabVertical-pane-2" class="tab-pane" role="tabpanel" aria-labelledby="tabVertical-2"> <p>Panel 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.</p> </div> <div id="tabVertical-pane-3" class="tab-pane" role="tabpanel" aria-labelledby="tabVertical-3"> <p>Panel 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.</p> </div> </div> </div> </div>

Tab panel with fade effect

Panel 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.

Panel 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.

Panel 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item" role="presentation">
    <button type="button" id="tabFade-1" class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabFade-pane-1" role="tab" aria-controls="tabFade-pane-1" aria-selected="true">Panel 1</button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" id="tabFade-2" class="nav-link" data-bs-toggle="tab" data-bs-target="#tabFade-pane-2" role="tab" aria-controls="tabFade-pane-2" aria-selected="false">Panel 2</button>
  </li>
  <li class="nav-item" role="presentation">
    <button type="button" id="tabFade-3" class="nav-link" data-bs-toggle="tab" data-bs-target="#tabFade-pane-3" role="tab" aria-controls="tabFade-pane-3" aria-selected="false">Panel 3</button>
  </li>
</ul>
<div class="tab-content">
  <div id="tabFade-pane-1" class="tab-pane fade show active" role="tabpanel" aria-labelledby="tabFade-1">
    <p>Panel 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.</p>
  </div>
  <div id="tabFade-pane-2" class="tab-pane fade" role="tabpanel" aria-labelledby="tabFade-2">
    <p>Panel 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.</p>
  </div>
  <div id="tabFade-pane-3" class="tab-pane fade" role="tabpanel" aria-labelledby="tabFade-3">
    <p>Panel 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.</p>
  </div>
</div>
<ul class="nav nav-tabs" role="tablist"> <li class="nav-item" role="presentation"> <button type="button" id="tabFade-1" class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabFade-pane-1" role="tab" aria-controls="tabFade-pane-1" aria-selected="true">Panel 1</button> </li> <li class="nav-item" role="presentation"> <button type="button" id="tabFade-2" class="nav-link" data-bs-toggle="tab" data-bs-target="#tabFade-pane-2" role="tab" aria-controls="tabFade-pane-2" aria-selected="false">Panel 2</button> </li> <li class="nav-item" role="presentation"> <button type="button" id="tabFade-3" class="nav-link" data-bs-toggle="tab" data-bs-target="#tabFade-pane-3" role="tab" aria-controls="tabFade-pane-3" aria-selected="false">Panel 3</button> </li> </ul> <div class="tab-content"> <div id="tabFade-pane-1" class="tab-pane fade show active" role="tabpanel" aria-labelledby="tabFade-1"> <p>Panel 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.</p> </div> <div id="tabFade-pane-2" class="tab-pane fade" role="tabpanel" aria-labelledby="tabFade-2"> <p>Panel 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.</p> </div> <div id="tabFade-pane-3" class="tab-pane fade" role="tabpanel" aria-labelledby="tabFade-3"> <p>Panel 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.</p> </div> </div>