BootstrapHow-ToBeginner · 3 min read

How to Open Modal in Bootstrap: Simple Steps and Example

To open a modal in Bootstrap, use a button or link with data-bs-toggle="modal" and data-bs-target="#modalId" attributes pointing to the modal's ID. Alternatively, open it via JavaScript using new bootstrap.Modal(document.getElementById('modalId')).show().

📐

Syntax

Bootstrap modals can be opened using HTML attributes or JavaScript.

HTML method: Use data-bs-toggle="modal" on a button or link to trigger the modal.
Target: Use data-bs-target="#modalId" to specify which modal to open by its ID.
JavaScript method: Create a modal instance with new bootstrap.Modal() and call .show() to open it programmatically.

html

<!-- HTML method -->
<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal">Open Modal</button>

<!-- Modal structure -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Modal content here -->
    </div>
  </div>
</div>

// JavaScript method
const myModal = new bootstrap.Modal(document.getElementById('exampleModal'));
myModal.show();

💻

Example

This example shows a button that opens a modal when clicked using Bootstrap 5's data attributes. The modal contains a header, body, and footer with a close button.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Modal 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="#myModal">
  Open Modal
</button>

<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 body content.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output

A webpage with a blue button labeled 'Open Modal'. Clicking it opens a centered modal with title 'Modal Title', some body text, and a close button.

⚠️

Common Pitfalls

Common mistakes when opening Bootstrap modals include:

Forgetting to include Bootstrap's JavaScript bundle, so the modal won't open.
Using incorrect data-bs-target that doesn't match the modal's ID.
Missing required modal structure classes like modal, modal-dialog, and modal-content.
Using data-toggle or data-target instead of Bootstrap 5's data-bs-toggle and data-bs-target.

Example of wrong and right attribute usage:

html

<!-- Wrong (Bootstrap 4 syntax, won't work in Bootstrap 5) -->
<button data-toggle="modal" data-target="#myModal">Open</button>

<!-- Right (Bootstrap 5 syntax) -->
<button data-bs-toggle="modal" data-bs-target="#myModal">Open</button>

📊

Quick Reference

Use this quick guide to open Bootstrap modals:

Action	Code Example
Open modal with button
Modal container ID
Open modal with JavaScript	new bootstrap.Modal(document.getElementById('modalId')).show()
Close modal button

✅

Key Takeaways

Use data-bs-toggle="modal" and data-bs-target="#modalId" on buttons or links to open modals easily.

Always include Bootstrap's JavaScript bundle for modals to work.

Ensure modal HTML structure and IDs match the trigger attributes.

Use Bootstrap 5's updated data attribute names with the bs- prefix.

You can also open modals programmatically with JavaScript using bootstrap.Modal().show().