Modals
5 min read Quiz at the end
Open modals via data-bs-toggle, control them with JS API, and listen to shown.bs.modal events.
Modals
<!-- Trigger button -->
<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">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Confirm Action</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">Are you sure?</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
<!-- JavaScript control -->
<script>
const modal = new bootstrap.Modal(document.getElementById("myModal"));
modal.show();
modal.hide();
</script>
Topic Quiz · 3 questions
Test your understanding before moving on
1. What triggers a Bootstrap modal to open?
💡 The button needs data-bs-toggle="modal" and data-bs-target pointing to the modal id.
2. What class centers a modal vertically?
💡 modal-dialog-centered adds flexbox alignment to center the modal in viewport.
3. How do you open a modal via JavaScript?
💡 const modal = new bootstrap.Modal(el); modal.show(); is the Bootstrap 5 JS API.