Bootstrap Navs and Tabs

The .nav component is the base for menus, tabs and pills. You can use it alone, or make tabs with content panels.

Base nav

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

Tabs, pills and underline

<ul class="nav nav-tabs mb-3">
  <li class="nav-item"><a class="nav-link active" href="#">Tab</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Tab</a></li>
</ul>
<ul class="nav nav-pills mb-3">
  <li class="nav-item"><a class="nav-link active" href="#">Pill</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Pill</a></li>
</ul>
<ul class="nav nav-underline">
  <li class="nav-item"><a class="nav-link active" href="#">Underline</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Underline</a></li>
</ul>

Fill and justify

.nav-fill makes the items fill the width (each item has its own width). .nav-justified gives all items the same width. Use .flex-column for a vertical nav.

Working tabs (JavaScript)

To show content under the tabs, add data-bs-toggle="tab" and data-bs-target on each button, and a .tab-content with .tab-pane panels.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content border border-top-0 p-3" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab" tabindex="0">Home content</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">Profile content</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">Contact content</div>
</div>

Click the tabs in the preview. Here we test it with code in real Chrome:

document.getElementById('profile-tab').click();
await new Promise(r => setTimeout(r, 500));
const active = document.querySelector('.tab-pane.active');
console.log('active panel after click on Profile: #' + active.id + ' -> ' + active.textContent.trim());
console.log('aria-selected of the Profile tab: ' + document.getElementById('profile-tab').getAttribute('aria-selected'));
console.log('aria-selected of the Home tab: ' + document.getElementById('home-tab').getAttribute('aria-selected'));

Pills with tabs

The same panels work with nav-pills. Also, you can use a list group as the tab menu, or a vertical nav on the left.

Show a tab by code

const trigger = document.querySelector('#profile-tab');
bootstrap.Tab.getOrCreateInstance(trigger).show();

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.