How do I create a modal fullscreen at certain breakpoints only?

Asked on Jun 29, 2025

1 Answer

To create a modal that becomes fullscreen at certain breakpoints using Bootstrap 5, you can utilize the `modal-fullscreen-{breakpoint}-down` classes. This allows the modal to be fullscreen on specific screen sizes. ```html

<!-- BEGIN COPY / PASTE -->
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-fullscreen-md-down">
                <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 -->
                        This modal is fullscreen on medium screens and smaller.
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

Use the `modal-fullscreen-md-down` class to make the modal fullscreen on medium screens (≤ 768px) and smaller.
You can replace `md` with `sm`, `lg`, `xl`, or `xxl` to target different breakpoints.
Ensure you have included Bootstrap's CSS and JS files in your project for the modal to function correctly.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions