Modal width (increase)

Question

I want a modal to be 80% or so of a screen width. modal-lg isn't large enough. This:

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

Doesn't work with Bootstrap 4.

Solution 1

Bootstrap 3

You can create or just override default bootstrap modal-lgby doing below:

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

If not working just add !important so it would look like below

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

Now call the 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 4 utilities might break the responsiveness.

Solution 2

Bootstrap 4 includes sizing utilities. You can change the size to 25/50/75/100% of the page width (I wish there were even more increments).

To use these we will replace the modal-lg class. Both the default width and modal-lg use css max-width to control the modal's width, so first add the mw-100 class to effectively disable max-width. Then just add the width class you want, e.g. w-75.

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

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

Solution 3

For responsive answer.

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

Solution 4

In Bootstrap 4 you have to use 'max-width' attribute and then it works perfectly.

<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>

Solution 5

Simply Use !important after giving width of that class that is override your class.

For Example

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

Hopefully this will works for you.

View more solutions

Comments

[Stefan]

This is the real answer.

[Alan Pallath]

But is this responsive? I changed for a modal window, but for the mobile window it's retaining the class. a modal-lg won't do that i think

[kitsu.eb]

@AlanPallath Any use of the width classes potentially breaks responsiveness. There was a proposal for responsive width classes (ex. w-lg-100), but the bootstrap maintainers didn't want to add them.

[Alan Pallath]

Yea, I thought so. Hence a @media (min-width: 992px) helped me solve the issue instead of this one. Thanks anyway.

[tomhre]

this is correct answer, answer from kitsu.eb breaks the modal in xs sizes, thanks @Joel

[Sapna Dorbi]

it is working but is not responsive, for iPhone it is not working

[Anil P Babu]

This fails on small (xs) screens