Bootstrap - JavaScript Initialization & Programmatic Control in Bootstrap

Bootstrap 5 includes interactive components such as modals, dropdowns, tooltips, carousels, offcanvas menus, and collapses. Many beginners only use them with data-bs-* attributes in HTML, but Bootstrap also allows programmatic control using JavaScript.

In Bootstrap 5, jQuery is no longer required. All components are written in vanilla JavaScript, which makes them lighter and more modern.

There are two ways to initialize components:

1. Automatic Initialization (Data Attributes)
Example:

<button data-bs-toggle="modal" data-bs-target="#exampleModal">

This works without writing JavaScript.

2. Manual Initialization (JavaScript API)
Example:

var myModal = new bootstrap.Modal(document.getElementById('exampleModal'));
myModal.show();

This method allows:

• Showing or hiding components using logic

• Triggering UI actions after form validation

• Integrating Bootstrap with frameworks like React or Vue

• Controlling behavior dynamically

You can also listen to events:

exampleModal.addEventListener('shown.bs.modal', function () {
  console.log('Modal opened');
});

Why this is important for students:

• Helps understand event-driven UI behavior

• Enables advanced interactivity

• Essential for modern frontend integration

Using Bootstrap properly means understanding both its CSS and JavaScript architecture.