title: Modal covering the entire screen of the device
body: <p>I am trying to design a modal that covers the full width of the device. Here is my attempt:</p>
  
  <pre><code>&lt;!-- Modal --&gt;
    &lt;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"&gt;
      &lt;div class="modal-dialog modal-lg" role="document"&gt;
        &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
            &lt;h5 class="modal-title" id="exampleModalLabel"&gt;Preview&lt;/h5&gt;
            &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
              &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
            &lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="modal-body" style="padding:50px;"  id="result"&gt;
  
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
            &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;OK&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!--MODAL--&gt;
  </code></pre>
  
  <p>This is what I am getting : 
  <a href="https://i.stack.imgur.com/JHJVb.png" rel="noreferrer">Output</a></p>