#1
  1. A Change of Season
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,545
    Rep Power
    221

    Bootstrap 4 modal 100%


    Hi;

    How can I make this modal to open 100% of the screen?

    I see in css .modal-lg has max-width 800px. But the screen can be bigger than that.

    Thanks

    Code:
    <!-- Large modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
    
    <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          ...
        </div>
      </div>
    </div>
    
    <!-- Small modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>
    
    <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          ...
        </div>
      </div>
    </div>
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Location
    Somerville, MA
    Posts
    51
    Rep Power
    72
    Code:
    .modal-lg {
    /* this value can be removed or reset. your choice */
     max-width:inherit;
     min-height:100vh;
     min-width:100vw;
    }
    Web Developer/Designer here
  4. #3
  5. A Change of Season
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,545
    Rep Power
    221
    Originally Posted by Paul-Ninja
    Code:
    .modal-lg {
    /* this value can be removed or reset. your choice */
     max-width:inherit;
     min-height:100vh;
     min-width:100vw;
    }
    Beautiful

IMN logo majestic logo threadwatch logo seochat tools logo