JavaScript API

🎮 Bootstrap JavaScript API: Your Remote Control for Websites!

Imagine this: You have a super cool toy robot. It has buttons, lights, and makes sounds. But what makes it actually move and do cool stuff? The remote control! Bootstrap’s JavaScript API is exactly that — the remote control for all those beautiful Bootstrap components like modals, dropdowns, and carousels!

🌟 The Big Picture

Think of Bootstrap like a LEGO set:

• HTML = The LEGO bricks (structure)
• CSS = The paint and decorations (looks pretty)
• JavaScript API = The motors and gears that make things MOVE!

Without the JavaScript API, your modal is just a pretty picture. With it? 🚀 It slides, it fades, it responds to your clicks!

🔧 JavaScript Initialization

What Is It?

When you wake up in the morning, you need to “turn on” before you can do anything, right? Initialization is waking up a Bootstrap component and telling it: “Hey, you’re alive now! Start working!”

The Magic Words

There are two ways to wake up a Bootstrap component:

Way 1: Let Bootstrap Do It Automatically (Data Attributes)

Bootstrap looks at your HTML and thinks: “Oh! I see data-bs-toggle! I’ll handle this myself!”

<!-- Bootstrap wakes this up automatically! -->
<button data-bs-toggle="modal"
        data-bs-target="#myModal">
  Open Modal
</button>

Way 2: You Wake It Up with JavaScript

Sometimes you want to be the boss. You wake up the component yourself!

// Find the modal element
const myModal = document.getElementById('myModal');

// Wake it up! Create a new Modal instance
const modal = new bootstrap.Modal(myModal);

🎯 Real-Life Example

// Get the element
const toastEl = document.getElementById('myToast');

// Wake it up with options!
const toast = new bootstrap.Toast(toastEl, {
  delay: 3000,  // Show for 3 seconds
  autohide: true
});

// Now you can control it!
toast.show();

💡 Pro Tip: Getting an Existing Instance

Already woke up a component before? Don’t create a new one — just find the existing one!

// Get the instance that's already awake
const modal = bootstrap.Modal.getInstance(myModal);

// Or get it, and if it doesn't exist, create it!
const modalOrNew = bootstrap.Modal
  .getOrCreateInstance(myModal);

🎉 JavaScript Component Events

What Are Events?

Imagine your component is a dog. Events are the dog telling you things:

• 🐕 “I’m about to bark!” (before something happens)
• 🐕 “I just barked!” (after something happened)

Bootstrap components talk to you through events!

The Two Types of Events

graph TD
    A["Event Happens"] --> B{Event Type?}
    B --> C["🔮 Before Event<br/>show.bs.modal<br/>hide.bs.modal"]
    B --> D["✅ After Event<br/>shown.bs.modal<br/>hidden.bs.modal"]
    C --> E["You can STOP it!<br/>preventDefault"]
    D --> F["Already done!<br/>Just react to it"]

🎬 The Event Timeline

📝 Listening for Events

const myModal = document.getElementById('myModal');

// Listen for the "about to show" event
myModal.addEventListener('show.bs.modal', (event) => {
  console.log('Modal is about to open!');
});

// Listen for the "finished showing" event
myModal.addEventListener('shown.bs.modal', (event) => {
  console.log('Modal is now fully open!');
  // Focus on an input inside the modal
  document.getElementById('myInput').focus();
});

🛑 Stopping an Event

Want to stop a modal from opening? Say “NO!” with preventDefault()!

myModal.addEventListener('show.bs.modal', (event) => {
  // Check if user is not logged in
  if (!userIsLoggedIn) {
    event.preventDefault(); // STOP! Don't open!
    alert('Please log in first!');
  }
});

📬 Finding Who Started It

The event carries information about what triggered it!

myModal.addEventListener('show.bs.modal', (event) => {
  // Who clicked the button that opened this?
  const button = event.relatedTarget;

  // Get data from that button
  const userId = button.getAttribute('data-bs-user');
  console.log('Opening modal for user:', userId);
});

🎛️ JavaScript Component Methods

What Are Methods?

Methods are commands you give to your components. Like telling your robot: “Walk forward! Turn left! Dance!”

Common Methods All Components Have

graph TD
    A["Bootstrap Component"] --> B["🎬 show"]
    A --> C["🙈 hide"]
    A --> D["🔄 toggle"]
    A --> E["🗑️ dispose"]

🎬 Using Methods

// Create the modal instance
const myModal = new bootstrap.Modal('#myModal');

// Open it!
myModal.show();

// Close it after 5 seconds
setTimeout(() => {
  myModal.hide();
}, 5000);

🎠 Carousel-Specific Methods

Carousels have special commands for sliding:

const carousel = new bootstrap.Carousel('#myCarousel');

// Go to next slide
carousel.next();

// Go to previous slide
carousel.prev();

// Jump to slide number 3 (index 2)
carousel.to(2);

// Pause auto-sliding
carousel.pause();

// Start auto-sliding again
carousel.cycle();

🧹 Cleaning Up with dispose()

When you’re done with a component, clean up after yourself!

const tooltip = new bootstrap.Tooltip('#myButton');

// Later, when you don't need it anymore...
tooltip.dispose();  // Gone! Memory freed!

⚡ Static Methods

Some methods don’t need an instance — they work on the class itself!

// Get an existing modal instance
const modal = bootstrap.Modal.getInstance(element);

// Get or create if it doesn't exist
const modal = bootstrap.Modal.getOrCreateInstance(element);

🏷️ Data Attributes API

What Are Data Attributes?

Data attributes are like sticky notes you put on your HTML elements. Bootstrap reads these notes and knows what to do — no JavaScript writing needed!

They all start with data-bs- (the “bs” stands for Bootstrap!).

🎯 The Two Main Ones

graph TD
    A["data-bs-toggle"] --> B["What action?<br/>modal, dropdown, tab..."]
    C["data-bs-target"] --> D["Which element?<br/>#myModal, .dropdown-menu..."]
    A --> E["Bootstrap knows<br/>WHAT to do"]
    C --> E

📝 Common Data Attributes

🎪 No JavaScript Needed!

Look how easy this is — a working modal with ZERO JavaScript:

<!-- Button that opens modal -->
<button data-bs-toggle="modal"
        data-bs-target="#exampleModal">
  Open Modal
</button>

<!-- The Modal -->
<div class="modal" id="exampleModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5>Hello!</h5>
        <!-- Close button - also no JS! -->
        <button data-bs-dismiss="modal">×</button>
      </div>
      <div class="modal-body">
        <p>This works without any JavaScript!</p>
      </div>
    </div>
  </div>
</div>

🎛️ Passing Options via Data Attributes

You can configure components right in the HTML!

<!-- Toast with custom options -->
<div class="toast"
     data-bs-autohide="false"
     data-bs-delay="10000">
  This toast won't auto-hide!
</div>

<!-- Carousel that doesn't loop -->
<div class="carousel"
     data-bs-wrap="false"
     data-bs-interval="3000">
  ...
</div>

🔄 Converting JavaScript Options to Data Attributes

Easy rule: Take the JavaScript option and add data-bs- prefix!

🚫 Disabling Data Attributes

Want Bootstrap to leave certain elements alone?

// Turn off ALL automatic initialization
// Add this BEFORE Bootstrap loads
window.addEventListener('load', () => {
  // Bootstrap won't auto-init anything
});

Or for specific elements:

<!-- This dropdown won't auto-initialize -->
<div class="dropdown" data-bs-toggle="false">
  ...
</div>

🎓 Putting It All Together

Here’s a complete example using everything we learned:

<!-- Button with data attributes -->
<button id="openBtn"
        data-bs-toggle="modal"
        data-bs-target="#superModal"
        data-bs-user-id="123">
  Open Super Modal
</button>

<!-- Modal with options via data attributes -->
<div class="modal"
     id="superModal"
     data-bs-backdrop="static"
     data-bs-keyboard="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 id="modalTitle">Welcome!</h5>
        <button data-bs-dismiss="modal">×</button>
      </div>
      <div class="modal-body">
        <p id="modalBody">Loading...</p>
      </div>
    </div>
  </div>
</div>

const modalEl = document.getElementById('superModal');

// Listen for events
modalEl.addEventListener('show.bs.modal', (event) => {
  // Get who triggered it
  const button = event.relatedTarget;
  const userId = button.getAttribute('data-bs-user-id');

  // Update modal content
  document.getElementById('modalTitle').textContent =
    `Hello, User ${userId}!`;
});

modalEl.addEventListener('shown.bs.modal', () => {
  console.log('Modal is ready!');
});

modalEl.addEventListener('hidden.bs.modal', () => {
  console.log('See you next time!');
});

// You can also control it with JavaScript
const modal = bootstrap.Modal.getOrCreateInstance(modalEl);

// Maybe close it after 10 seconds
setTimeout(() => modal.hide(), 10000);

🌈 Quick Summary

🚀 You Did It!

Now you know how to:

• ✅ Wake up Bootstrap components with JavaScript
• ✅ Listen to what they’re telling you through events
• ✅ Command them with methods
• ✅ Configure them without any JavaScript using data attributes

You’re now the master of the Bootstrap remote control! 🎮✨

💡 Remember: Data attributes are great for simple stuff. JavaScript gives you superpowers when you need more control. Use both together for the best experience!