BootstrapHow-ToBeginner · 3 min read

How to Close Modal in Bootstrap: Simple Methods Explained

To close a modal in Bootstrap, you can use the data-bs-dismiss="modal" attribute on buttons or links inside the modal. Alternatively, use JavaScript by calling bootstrap.Modal.getInstance(element).hide() or creating a modal instance and calling hide().

📐

Syntax

Bootstrap modals can be closed using HTML attributes or JavaScript methods.

HTML: Add data-bs-dismiss="modal" to a button or link inside the modal to close it automatically when clicked.
JavaScript: Use bootstrap.Modal.getInstance(modalElement).hide() to close an open modal programmatically.

html

<!-- HTML button to close modal -->
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>

// JavaScript to close modal
const modalElement = document.getElementById('myModal');
const modalInstance = bootstrap.Modal.getInstance(modalElement);
modalInstance.hide();

💻

Example

This example shows a Bootstrap modal with a close button using data-bs-dismiss="modal" and a separate button outside the modal that closes it using JavaScript.

html

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

<!-- Button to open modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Open Modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalLabel">Modal Title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        This is the modal content.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- Button to close modal with JavaScript -->
<button id="closeModalBtn" class="btn btn-danger mt-3">Close Modal with JS</button>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
  const modalElement = document.getElementById('myModal');
  const closeModalBtn = document.getElementById('closeModalBtn');

  closeModalBtn.addEventListener('click', () => {
    let modalInstance = bootstrap.Modal.getInstance(modalElement);
    if (!modalInstance) {
      modalInstance = new bootstrap.Modal(modalElement);
    }
    modalInstance.hide();
  });
</script>

</body>
</html>

Output

A webpage with a button labeled 'Open Modal'. Clicking it opens a modal with a title, content, and two close buttons: a small 'X' in the header and a 'Close' button in the footer. Both close the modal. Below, a red button labeled 'Close Modal with JS' closes the modal programmatically if it is open.

⚠️

Common Pitfalls

Common mistakes when closing Bootstrap modals include:

Not including data-bs-dismiss="modal" on buttons inside the modal, so clicking them does not close the modal.
Trying to call hide() on a modal instance that was never created or is null.
Using old Bootstrap 4 attributes like data-dismiss instead of Bootstrap 5's data-bs-dismiss.
Not loading Bootstrap's JavaScript bundle, which is required for modal functionality.

html

<!-- Wrong: missing data-bs-dismiss attribute -->
<button type="button" class="btn btn-secondary">Close</button>

<!-- Right: with data-bs-dismiss attribute -->
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>

📊

Quick Reference

Use this quick guide to close Bootstrap modals:

Method	How to Use
HTML Attribute	Add `data-bs-dismiss="modal"` to buttons or links inside the modal.
JavaScript	Call `bootstrap.Modal.getInstance(modalElement).hide()` to close programmatically.
Bootstrap Version	Use Bootstrap 5 syntax with `data-bs-*` attributes.

Method	How to Use
HTML Attribute	Add `data-bs-dismiss="modal"` to buttons or links inside the modal.
JavaScript	Call `bootstrap.Modal.getInstance(modalElement).hide()` to close programmatically.
Bootstrap Version	Use Bootstrap 5 syntax with `data-bs-*` attributes.

✅

Key Takeaways

Add data-bs-dismiss="modal" to buttons inside the modal to close it automatically.

Use bootstrap.Modal.getInstance(element).hide() in JavaScript to close modals programmatically.

Always include Bootstrap's JavaScript bundle for modal functionality.

Use Bootstrap 5's data-bs-* attributes, not older Bootstrap 4 syntax.

Check that the modal instance exists before calling hide() in JavaScript.