Tabs

Use Bootstrap's tab components to create tabbable panes of content. Use .nav-tabs or .nav-pills with the data-bs-toggle="tab" attribute.

Basic Tabs

This is the Home tab content.
This is the Profile tab content.
This is the Contact tab content. 
							<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <button class="nav-link active"
      data-bs-toggle="tab"
      data-bs-target="#pane1">Tab 1</button>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active" id="pane1">
    Content 1
  </div>
</div>

Pills

Home pill content.
Profile pill content.
Contact pill content.
							<ul class="nav nav-pills" role="tablist">
  <li class="nav-item">
    <button class="nav-link active"
      data-bs-toggle="pill"
      data-bs-target="#pane1">Home</button>
  </li>
</ul>

Fill Tabs

Fill tabs distribute space equally.
Profile content here.
Contact content here.
							<ul class="nav nav-tabs nav-fill">...</ul>
<ul class="nav nav-tabs nav-justified">...</ul>

Vertical Pills

Home content
Profile content
Messages content
							<div class="d-flex">
  <div class="nav flex-column nav-pills me-3">
    <button class="nav-link active"
      data-bs-toggle="pill"
      data-bs-target="#v-home">Home</button>
  </div>
  <div class="tab-content">
    <div class="tab-pane fade show active" id="v-home">
      Content
    </div>
  </div>
</div>