How to pass data to modal bootstrap

BootstrapHow-ToBeginner · 4 min read

How to Pass Data to Bootstrap Modal Easily

To pass data to a Bootstrap modal, use data-* attributes on the trigger element and listen for the show.bs.modal event to update modal content dynamically with JavaScript. This lets you send custom data like text or IDs to the modal before it appears.

📐

Syntax

Use data-bs-toggle="modal" and data-bs-target="#modalId" on the button or link that opens the modal. Add custom data-* attributes to pass your data. Then, listen for the show.bs.modal event on the modal to access these attributes and update the modal content.

data-bs-toggle="modal": tells Bootstrap this element opens a modal
data-bs-target="#modalId": specifies which modal to open
data-whatever="value": custom data attribute to pass info
show.bs.modal: event fired before modal shows

html

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-whatever="Hello!">Open Modal</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p id="modal-text">Default text</p>
      </div>
    </div>
  </div>
</div>

Output

A button labeled 'Open Modal' that opens a modal with the title 'Modal title' and body text 'Default text'.

💻

Example

This example shows how to pass a message from the button to the modal body dynamically using JavaScript when the modal opens.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Modal Data Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-whatever="Hello from button!">Open Modal</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p id="modal-text">Default text</p>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
  const exampleModal = document.getElementById('exampleModal');
  exampleModal.addEventListener('show.bs.modal', event => {
    const button = event.relatedTarget; // Button that triggered the modal
    const data = button.getAttribute('data-whatever'); // Extract info from data-* attribute
    const modalText = exampleModal.querySelector('#modal-text');
    modalText.textContent = data; // Update modal content
  });
</script>

</body>
</html>

Output

A webpage with a button labeled 'Open Modal'. Clicking it opens a modal showing the text 'Hello from button!' inside the modal body.

⚠️

Common Pitfalls

Not using data-bs-toggle="modal" or data-bs-target correctly prevents the modal from opening.
Forgetting to listen to the show.bs.modal event means the modal content won't update dynamically.
Using incorrect attribute names like data-toggle instead of data-bs-toggle in Bootstrap 5 causes issues.
Trying to access event.relatedTarget outside the event handler will not work.

html

<!-- Wrong: missing data-bs-toggle -->
<button type="button" class="btn btn-primary" data-bs-target="#exampleModal" data-whatever="Oops">Open Modal</button>

<!-- Right: correct attributes -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-whatever="Correct!">Open Modal</button>

📊

Quick Reference

Trigger element: Add data-bs-toggle="modal" and data-bs-target="#modalId".
Custom data: Use data-* attributes to pass info.
JavaScript: Listen for show.bs.modal event to update modal content.
Bootstrap 5: Use data-bs-* prefix, not data-* alone.

✅

Key Takeaways

Use data-bs-toggle and data-bs-target on the trigger to open the modal.

Pass custom data with data-* attributes on the trigger element.

Update modal content inside the show.bs.modal event handler using event.relatedTarget.

Always use Bootstrap 5's data-bs-* attribute naming for compatibility.

Test your modal to ensure data passes and updates correctly before showing.