Bootstrap

Bootstrap Js Tab

How to Build Responsive Tabs with Bootstrap JS

Tabs are a classic UI pattern for organizing content into manageable sections without navigating away from the page. Bootstrap’s Tabs component makes it simple to create accessible, dynamic tabbed interfaces using built-in JavaScript.

In this post, you’ll learn how to:

  • ✅ Structure tabs with Bootstrap markup

  • Switch tabs with JavaScript API

  • ⚙️ Customize and listen to tab events

  • Use cases and tips

Step 1: Include Bootstrap

Add Bootstrap 5+ CSS and JS bundle to your page:

html
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Step 2: Basic Tabs Markup

html
<!-- Nav tabs -->
<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>

<!-- Tab content -->
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
Home tab content goes here.
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
Profile tab content goes here.
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
Contact tab content goes here.
</div>
</div>

JavaScript Control: Activate Tabs Programmatically

Bootstrap lets you control tabs via its JavaScript API.

javascript
// Get tab trigger button
const profileTabTrigger = document.querySelector('#profile-tab');

// Create a Bootstrap Tab instance
const tabInstance = new bootstrap.Tab(profileTabTrigger);

// Show the profile tab
tabInstance.show();

Tab Events

You can listen for tab events to hook custom behavior:

javascript
const myTabEl = document.getElementById('myTab');

myTabEl.addEventListener('shown.bs.tab', event => {
console.log(`Activated tab: ${event.target.id}`); // newly activated tab
console.log(`Previous tab: ${event.relatedTarget.id}`); // previous tab
});

⚙️ Customization Tips

  • Use fade and show classes for smooth tab transitions.

  • Tabs support accessibility attributes (aria-*) by default.

  • Nest tabs inside cards, modals, or other components easily.

✅ Common Use Cases

  • Dashboard content switching

  • Profile or settings pages

  • Product info tabs on eCommerce sites

  • FAQ with categorized questions

Final Thoughts

Bootstrap’s Tabs component is a straightforward way to organize content without page reloads or complex JavaScript. The combination of semantic markup and JavaScript API gives you both ease of use and control.

Helpful Links

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *