Modal width (increase)

Question

I want the modal to be 80% of the screen width. modal-lg not big enough. It:

 .modal .modal-dialog { width: 80%; } 

Doesn't work with Bootstrap 4.

Answer 1

Bootstrap 3

You can create or simply override the default bootloader modal-lg by doing the following:

 .modal-lg { max-width: 80%; } 

If it doesn't work, just add !important to make it look like below

 .modal-lg { max-width: 80% !important; } 

Now call modal-lg .

 <div class="modal-dialog modal-lg" role="document"> <!-- some modal content ---> </div 

For Bootstrap 4, refer to @ kitsu.eb answer. Also note that using bootstrap utilities 4 may violate responsiveness.

Answer 2

Bootstrap 4 includes utilities for sizing . You can resize to 25/50/75/100% of the width of the page (I would like to see even more increments).

To use them, we will replace the modal-lg class. Both the default width and modal-lg use css max-width to control the modal width, so first add the mw-100 class to effectively disable max-width . Then just add the desired width class, for example, w-75 .

Note that you should put the mw-100 and w-75 classes in a div with the modal-dialog class, and not with the modal div, e.g.

 <div class='modal-dialog mw-100 w-75'> ... </div> 

Answer 3

For a response.

 @media (min-width: 992px) { .modal-dialog { max-width: 80%; } } 

Answer 4

In Bootstrap 4, you should use the 'max-width' attribute, and then it works fine.

 <div id="modal_dialog" class="modal fade" tabindex="-1" role="dialog" style="display: none;"> <div class="modal-dialog" style="max-width: 1350px!important;" role="document"> <div class="modal-content"> <div class="modal-body"> Sample text </div> </div> </div> 

Answer 5

Just use it! important after giving the width of this class overriding your class.

Example

 .modal .modal-dialog { width: 850px !important; } 

Hope this works for you.

Answer 6

This was a solution that worked for me:

 .modal{ padding: 0 !important; } .modal-dialog { max-width: 80% !important; height: 100%; padding: 0; margin: 0; } .modal-content { border-radius: 0 !important; height: 100%; } 

 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /> <a href="#" class="menu-toggler" data-toggle="modal" data-target=".bd-example-modal-lg">Menu</a> <div class="modal mobile-nav-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"> <a href="#" class="" data-dismiss="modal">Close Menu</a> <nav class="modal-nav"> <ul> <li><a data-toggle="collapse" href="#collapseExample" role="button">Shop</a> <div class="collapse" id="collapseExample"> <ul> <li><a href="#">List 1</a></li> <li><a href="#">List 2</a></li> <li><a href="#">List 3</a></li> </ul> <ul> <li><a href="#">List 1</a></li> <li><a href="#">List 2</a></li> <li><a href="#">List 3</a></li> </ul> </div> </li> <li><a href="#">Made To Order</a></li> <li><a href="#">Heritage</a></li> <li><a href="#">Style & Fit</a></li> <li><a href="#">Sign In</a></li> </ul> </nav> </div> </div> </div> 

Answer 7

Make sure that your modal is not placed in the container, try adding an important note if it does not change the width from the original one.

Answer 8

try using px

 .modal .modal-dialog { width: 850px; } 

just resize.

Answer 9

If you use Sass,

according to the documentation you can set your default values.

In your case, you can easily override a variable named $modal-lg in the _custom.scss file.