Modal coverage of the entire screen of the device

Question

I am trying to create a modal that spans the entire width of a device. Here is my attempt:

<!-- Modal --> <div class="container-fluid modal fade bd-example-modal-lg" style=" max-width: 100vw;" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Preview</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body" style="padding:50px;" id="result"> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button> </div> </div> </div> </div> <!--MODAL--> 

This is what I get: Exit

Answer 1

Creating a full-screen modal value is different in the latest Bootstrap 4 than in the previous answer for Bootstrap 3.

 .modal-full { min-width: 100%; margin: 0; } .modal-full .modal-content { min-height: 100vh; } 

Then add the modal-full class to the modal:

 <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog modal-full" role="document"> <div class="modal-content"> ... </div> </div> </div> 

Demo : Bootstrap 4 Full Screen Modal