How to create full screen modal bootstrap

BootstrapHow-ToBeginner · 3 min read

How to Create a Full Screen Modal in Bootstrap Easily

To create a full screen modal in Bootstrap, add the modal-fullscreen class to the modal-dialog element. This class makes the modal cover the entire viewport, providing a full screen effect.

📐

Syntax

The key to a full screen modal in Bootstrap is the modal-fullscreen class. It is added to the modal-dialog element inside the modal structure.

modal: The main container for the modal.
modal-dialog: Wraps the modal content and controls size.
modal-fullscreen: Makes the modal cover the full viewport.
modal-content: Contains the header, body, and footer of the modal.

html

<div class="modal fade" id="exampleModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-fullscreen">
    <div class="modal-content">
      <!-- Modal header, body, footer here -->
    </div>
  </div>
</div>

💻

Example

This example shows a full screen modal with a header, body, and footer. The modal covers the entire screen when opened.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Full Screen Modal Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#fullscreenModal">
    Open Full Screen Modal
  </button>

  <div class="modal fade" id="fullscreenModal" tabindex="-1" aria-labelledby="fullscreenModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="fullscreenModalLabel">Full Screen Modal</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>This modal covers the entire screen using Bootstrap's <code>modal-fullscreen</code> class.</p>
          <p>You can add any content here, like forms, images, or text.</p>
        </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>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output

A webpage with a blue button labeled 'Open Full Screen Modal'. Clicking it opens a modal that covers the entire screen with a header, body text, and footer buttons.

⚠️

Common Pitfalls

Forgetting to add modal-fullscreen to modal-dialog will not make the modal full screen.
Not including Bootstrap's JavaScript bundle will prevent the modal from opening.
Using older Bootstrap versions (before 5.1) will not support modal-fullscreen.
Not setting proper aria attributes can reduce accessibility.

html

<!-- Wrong: missing modal-fullscreen class -->
<div class="modal-dialog">
  <div class="modal-content">...</div>
</div>

<!-- Right: includes modal-fullscreen -->
<div class="modal-dialog modal-fullscreen">
  <div class="modal-content">...</div>
</div>

📊

Quick Reference

Use the modal-fullscreen class on modal-dialog to make modals full screen. Bootstrap 5.1+ supports this feature with responsive options like modal-fullscreen-sm-down for smaller screens.

Always include Bootstrap CSS and JS for modals to work properly.

Class	Effect
modal-fullscreen	Full screen modal on all screen sizes
modal-fullscreen-sm-down	Full screen on small screens and below
modal-fullscreen-md-down	Full screen on medium screens and below
modal-fullscreen-lg-down	Full screen on large screens and below
modal-fullscreen-xl-down	Full screen on extra large screens and below
modal-fullscreen-xxl-down	Full screen on extra extra large screens and below

✅

Key Takeaways

Add the modal-fullscreen class to modal-dialog to create a full screen modal in Bootstrap.

Bootstrap 5.1 or later is required for modal-fullscreen support.

Include Bootstrap's CSS and JavaScript bundle for modal functionality.

Use responsive fullscreen classes to control modal size on different screen widths.

Set proper aria attributes for accessibility when using modals.