Bootstrap Module 30

  Module 30 : Navs & Tabs – Switching Content.

1. Concept: What Are Navs & Tabs?

Definition

Navs and Tabs are UI components used to switch between different sections of content without reloading the page.

Why Tabs Are Important

Improve 

Reduce scrolling

Organize complex data

Commonly used in dashboards, forms, settings pages

Examples

Profile pages (Profile | Settings | Security)

Admin dashboards

Product description sections

2. Types of Navs in Bootstrap

2.1 Nav Tabs

Used when content sections are equal in importance.

<ul class="nav nav-tabs">

 <li class="nav-item">

   <a class="nav-link active" href="#">Home</a>

 </li>

 <li class="nav-item">

   <a class="nav-link" href="#">Profile</a>

 </li>

</ul>

2.2 Nav Pills

Used for a softer, button-like appearance.

<ul class="nav nav-pills">

 <li class="nav-item">

   <a class="nav-link active" href="#">Dashboard</a>

 </li>

</ul>

3. Switching Content Using Tabs (Concept)

Key Mechanism

Bootstrap uses:

data-bs-toggle="tab"

Matching id and href

JavaScript internally to manage visibility

4. Complete Working Example

HTML Structure

<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">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">Profile</button>

 </li>

</ul>

<div class="tab-content">

 <div class="tab-pane fade show active" id="home">Home Content</div>

 <div class="tab-pane fade" id="profile">Profile Content</div>

</div>

data-bs-toggle="tab" activates tab behavior

data-bs-target="#home" links tab to content

.tab-pane holds content

.fade adds animation

.show.active displays current tab

5. JavaScript Behavior 

Bootstrap automatically:

Adds/removes .active

Controls .show and .fade

Manages keyboard navigation

Manual JavaScript Control

<script>

var tabTrigger = new bootstrap.Tab(document.querySelector('#profile-tab'));

tabTrigger.show();

</script>

Why This Matters

Dynamic tab switching

Form validation flows

Wizard-style navigation

6. Accessibility

ARIA Roles Used

role="tablist"

role="tab"

role="tabpanel"

        

Always use buttons instead of links

Ensure keyboard navigation

Keep labels meaningful

7. Advanced Customization

Vertical Tabs

<div class="d-flex">

 <ul class="nav nav-pills flex-column me-3">

   <li class="nav-item"><button class="nav-link active" data-bs-toggle="pill" data-bs-target="#v1">Tab 1</button></li>

 </ul>

 <div class="tab-content">

   <div class="tab-pane fade show active" id="v1">Content</div>

 </div>

</div>

Dynamic Tabs Using JavaScript

Tabs generated from API data or database values.

8. Common Errors & Debugging

Problem

Cause

Solution

Tab not switching

Missing JS file

Include bootstrap.bundle.js

Content not visible

ID mismatch

Match data-bs-target and id

Multiple active tabs

Incorrect classes

Only one .active

9. Exercises

Exercise 1 

Create 3 tabs: About, Services, Contact

Exercise 2 

Convert horizontal tabs into vertical tabs

Exercise 3 

Switch tabs programmatically after form submission

10. Building a Settings Page Using Tabs

Objective

Create a tab-based settings UI with smooth switching.

Steps

Create nav-tabs

Add tab-content sections

Style active tab

Trigger tab switch using JavaScript

Expected Output

Clean UI

Responsive layout

Smooth transitions

Explanation

dashboard environments where tabs organize user settings.

11. Research 

Bootstrap Tab API methods

ARIA tab accessibility standards

              

Performance comparison: tabs vs accordion

Custom animation overrides

Suggested Mini 

Analyze how Bootstrap manages DOM updates without page reload.

12. Use Case

Study: Admin Dashboard

Tabs used to separate:

User Info

Permissions

Activity Logs

Why Tabs?

Faster navigation

Reduced clutter

Better UX

13. Tips

Always match tab IDs correctly

Prefer buttons over anchor tags

Test keyboard navigation

                

Avoid nesting tabs unnecessarily

Summary

Navs & Tabs are essential UI components that enable efficient content switching. Mastering them improves usability, accessibility, and professional frontend development skills.

Suggestion

Bootstrap Navbar with Dropdowns & Responsive Behavior.