4. Bootstrap Interactive Components & Navigation

Chapters 17-22: Carousel, Collapse, Dropdowns, Modal dialogs, Offcanvas, Navbar, Pagination & Tooltips

Module 1: Responsive Navbar, Collapse & Offcanvas Drawers

Building mobile-collapsible navigation bars and sliding offcanvas sidebars.

🇬🇧 English Definition

Navbar is a responsive navigation header that collapses on mobile viewports using navbar-toggler and navbar-expand-*. Offcanvas provides slide-in sidebar panels.

🇮🇳 Hinglish Definition

Navbar navbar-expand-lg ke sath desktop par full aur mobile par hamburger menu banata hai. Offcanvas side se slide-in drawer panel kholta hai.

Core Concepts & Rules

  • Navbar Breakpoint: navbar-expand-md expands navigation at medium breakpoint.
  • Navbar Toggler:
  • Offcanvas:

🔍 Line-by-Line Code Breakdown

  1. Line 1-6: Navbar container with brand link, toggler button, and collapsible navigation items.

🎯 Interview Focus & Questions

  • Q: Why does a navbar not collapse on mobile?
    A: Check navbar-expand breakpoint, matching data-bs-target ID, and inclusion of Bootstrap JS bundle.
💻 Practical Bootstrap Code Example - Responsive Navbar, Collapse & Offcanvas Drawers 
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="javascript:void(0)">Academy</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link active" href="javascript:void(0)">Home</a></li>
      </ul>
    </div>
  </div>
</nav>
📤 Expected Rendered Result:
Dark responsive navigation bar with brand name and collapsible menu items.

Module 2: Modals, Carousels, Dropdowns & Tooltips

Interactive popup overlays, image carousels, dropdown menus, and interactive tooltips.

🇬🇧 English Definition

Modals present focused dialog overlays requiring data-bs-toggle='modal' and data-bs-target. Carousel displays cycling content slides.

🇮🇳 Hinglish Definition

Modal popup dialog window kholta hai task focus ke liye. Dropdown menu actions dikhati hai aur Tooltip hover info deta hai.

Core Concepts & Rules

  • Modal Setup:
  • Modal Structure: modal -> modal-dialog -> modal-content -> modal-header / modal-body / modal-footer.

🔍 Line-by-Line Code Breakdown

  1. Line 1:
  2. Line 2-6: Modal overlay dialog container with header and body.

🎯 Interview Focus & Questions

  • Q: Which Bootstrap components require JavaScript?
    A: Modal, Dropdown, Collapse, Carousel, Offcanvas, Toast, Tooltip, and Popover.
💻 Practical Bootstrap Code Example - Modals, Carousels, Dropdowns & Tooltips 
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="demoModal">Open Modal</button>
<div class="modal fade" id="demoModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"><h5 class="modal-title">Notice</h5></div>
      <div class="modal-body"><p>Bootstrap Modal Content by Instructor</p></div>
    </div>
  </div>
</div>
📤 Expected Rendered Result:
Button triggering animated modal dialog popup overlay.