Ask any question about Bootstrap here... and get an instant response.
Post this Question & Answer:
How can I make a Bootstrap modal close when clicking outside of it?
Asked on Feb 21, 2026
Answer
In Bootstrap 5, modals are designed to close when clicking outside of them by default. This behavior is controlled by the `data-bs-backdrop` attribute. Here's a simple example to ensure this feature is enabled.
<!-- BEGIN COPY / PASTE -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo 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">
Modal content goes here.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- END COPY / PASTE -->Additional Comment:
✅ Answered with Bootstrap 5 best practices.- By default, Bootstrap modals close when clicking outside of them due to the `data-bs-backdrop="true"` setting.
- If you want to disable this feature, you can set `data-bs-backdrop="static"`.
- Ensure you have included Bootstrap's JavaScript for modals to function correctly.
Recommended Links:
