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.

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