6. Bootstrap JavaScript API, Icons, Accessibility & Sass

Chapters 26-30: Data Attributes, JS API methods, Bootstrap Icons, ARIA Accessibility, Sass customization & CSS Variables

Module 1: Data Attributes vs JavaScript API Methods

Controlling Bootstrap interactive components via data-bs attributes or programmatically via JavaScript.

🇬🇧 English Definition

Bootstrap components can be initialized automatically using data-bs-* attributes (data-bs-toggle, data-bs-target) or programmatically via JS API constructor instances (new bootstrap.Modal(el)).

🇮🇳 Hinglish Definition

Components ko bina JS code ke data-bs-* attributes se connect kar sakte ho, ya JS me const modal = new bootstrap.Modal(el) se programmatically open/close kar sakte ho.

Core Concepts & Rules

  • Data Attributes: data-bs-toggle='modal' data-bs-target='myModal'
  • JS API: const modal = new bootstrap.Modal(document.getElementById('myModal')); modal.show();
  • Methods: show(), hide(), toggle(), dispose().

🔍 Line-by-Line Code Breakdown

  1. Line 1-3: JavaScript code instantiating Modal component and calling modal.show() programmatically.

🎯 Interview Focus & Questions

  • Q: Data attributes vs JavaScript API?
    A: Data attributes initialize components declaratively in HTML; JS API allows imperative control via JavaScript code methods.
💻 Practical Bootstrap Code Example - Data Attributes vs JavaScript API Methods 
// JavaScript API Example:
const el = document.getElementById("myModal");
const modalInstance = new bootstrap.Modal(el);
// Imperative method call:
modalInstance.show();
📤 Expected Rendered Result:
Modal overlay programmatically opens via JavaScript API call.

Module 2: Bootstrap Icons, ARIA Accessibility & CSS Variables

Integrating icon libraries, writing accessible HTML, and overriding CSS custom properties.

🇬🇧 English Definition

Bootstrap Icons is an independent SVG icon library. Accessible UI uses semantic HTML and ARIA attributes (aria-label, aria-hidden). Customization modifies CSS variables (--bs-primary).

🇮🇳 Hinglish Definition

Bootstrap Icons bi-check2 jaise icon classes deta hai. Accessibility ke liye aria-label use hota hai. CSS variables runtime par styling colors change karte hain.

Core Concepts & Rules

  • Bootstrap Icons CDN:
  • ARIA Attributes: aria-label='Close' provides accessible name for screen readers.
  • CSS Variables: :root { --bs-primary: rgb(111, 66, 193); }

🔍 Line-by-Line Code Breakdown

  1. Line 1: combines icon with screen reader label.

🎯 Interview Focus & Questions

  • Q: Why use aria-label on icon-only buttons?
    A: Provides an accessible text description for screen readers when no visible text is present.
💻 Practical Bootstrap Code Example - Bootstrap Icons, ARIA Accessibility & CSS Variables 
<button class="btn btn-primary" type="button" aria-label="Settings">
  <i class="bi bi-gear-fill" aria-hidden="true"></i> Settings
</button>
📤 Expected Rendered Result:
Primary button with gear icon and accessible text label.