Bootstrap 5 Fullscreen Modal

Bootstrap 5 Fullscreen Modal is used to create a modal that completely covers the entire screen of the user.

Bootstrap 5 Fullscreen Modal Used CLasses:

• modal-fullscreen: This class is used to create Full Screen Modal
• modal-fullscreen-*-down: This class is used to create a full-screen modal based upon breakpoints like sm, md, lg, xl,xxl

Syntax:

<div class="modal-dialog modal-fullscreen">
 ...
</div>

Example 1: In this example, we will learn about Fullscreen Modal

Output:

Example 2: In this example, we will see a modal that will be full-screen on smaller screens.

Output:

Reference: https://getbootstrap.com/docs/5.0/components/modal/#fullscreen-modal