bootstrap modal fullscreen

Bootstrap Modal Fullscreen

To create a fullscreen modal using Bootstrap, you can follow these steps:

1. Add the necessary Bootstrap CSS and JavaScript files to your HTML document. You can use the following CDN links:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

1. Create a button or a link that will trigger the modal:

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#fullscreenModal">
  Open Fullscreen Modal
</button>

1. Create the modal markup with the modal-fullscreen class:

<div class="modal modal-fullscreen" id="fullscreenModal" tabindex="-1" aria-labelledby="fullscreenModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="fullscreenModalLabel">Fullscreen Modal</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>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

1. Customize the modal content as needed within the <div class="modal-body">...</div> section.

That's it! You now have a fullscreen modal using Bootstrap.

Please note that the above code is based on Bootstrap 5.3.0. If you are using a different version, make sure to adjust the code accordingly.