JavaScript API & Events
Programmatic control of components and event handling
1 Programmatic Modal Control
Control modals with JavaScript methods instead of data attributes.
Modal API:
const modal = new bootstrap.Modal('#myModal');
modal.show(); // Show
modal.hide(); // Hide
modal.toggle(); // Toggle
modal.dispose(); // DisposeModal event log...
2 Modal Events
Modals emit events that you can listen to for executing custom code.
| Event | When it Fires |
|---|---|
show.bs.modal |
Before showing |
shown.bs.modal |
After showing |
hide.bs.modal |
Before hiding |
hidden.bs.modal |
After hiding |
Listen to Events:
const el = document.getElementById('myModal');
el.addEventListener('shown.bs.modal', function(e) {
console.log('Modal shown!');
// Your code here
});3 Programmatic Carousel Control
Control carousel programmatically and respond to events.
Slide 1
Slide 2
Slide 3
Carousel API:
const carousel = new bootstrap.Carousel('#carousel');
carousel.next(); // Next slide
carousel.prev(); // Previous slide
carousel.pause(); // Pause auto-play
carousel.cycle(); // Resume
carousel.to(2); // Go to slide index 2Carousel event log...
4 Toast Notifications
Toasts are lightweight notifications that require JavaScript initialization.
Create Toast:
const toast = new bootstrap.Toast('#myToast', {
animation: true,
autohide: true,
delay: 3000
});
toast.show();5 Offcanvas Control
Offcanvas are sliding panels that can be controlled programmatically.
Offcanvas API:
const offcanvas = new bootstrap.Offcanvas('#myOffcanvas');
offcanvas.show();
offcanvas.hide();
offcanvas.toggle();Offcanvas event log...
🎯 Key Takeaways About JavaScript API
-
Instantiation:
Create instances with
new bootstrap.ComponentName(element, options) -
Methods:
Each component has methods like
show(),hide(), etc. - Events: All components emit events before/after actions
-
Dispose:
Clean up components with
dispose()when no longer needed - Options: Configure behavior by passing options object to constructor