This question explores Bootstrap and addresses practical considerations related to: How can I make a Bootstrap modal close when clicking outside of it?

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. Launch demo modal Modal title Modal content goes here. Close ADDITIONAL COMMENT: - 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. ✅

How can I make a Bootstrap modal close when clicking outside of it?

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

Previous Question

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:

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.

✅ Answered with Bootstrap 5 best practices.

Ask any question about Bootstrap here... and get an instant response.

How can I make a Bootstrap modal close when clicking outside of it?

Asked on Feb 21, 2026

Answer

Real Questions. Clear Answers.