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.
This question is related to
bootstrap-4
bootstrap-modal
Make sure your modal is not placed in a container, try to add the !important annotation if it's not changing the width from the original one.
Set max-width:80%;
as an inline stylesheet
<div class="modal-dialog modal-lg" role="document" style="max-width: 80%;">
try to use px
.modal .modal-dialog {
width: 850px;
}
just change the size.
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>
For responsive answer.
@media (min-width: 992px) {
.modal-dialog {
max-width: 80%;
}
}
The following solution will work for Bootstrap 4.
.modal .modal-dialog {
max-width: 850px;
}
So i have been struggling too on the same issue. The quick and easiest way to solve the problem is by just adding
modal-lg
on your modal DivExample <div class="modal-dialog modal-lg">
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.
If you use Sass,
according to the documentation you can customize your default values.
In your case, you can easily override the variable named $modal-lg
in your _custom.scss
file.
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>
Try this, This was the solution that worked for me:
<div class="modal-dialog" style="min-width: 1500px" role="document">
This was the solution that worked for me:
.modal{_x000D_
padding: 0 !important;_x000D_
}_x000D_
.modal-dialog {_x000D_
max-width: 80% !important;_x000D_
height: 100%;_x000D_
padding: 0;_x000D_
margin: 0;_x000D_
}_x000D_
_x000D_
.modal-content {_x000D_
border-radius: 0 !important;_x000D_
height: 100%;_x000D_
}
_x000D_
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>_x000D_
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />_x000D_
<a href="#" class="menu-toggler" data-toggle="modal" data-target=".bd-example-modal-lg">Menu</a>_x000D_
_x000D_
<div class="modal mobile-nav-modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">_x000D_
<div class="modal-dialog modal-lg">_x000D_
<div class="modal-content">_x000D_
<a href="#" class="" data-dismiss="modal">Close Menu</a>_x000D_
_x000D_
<nav class="modal-nav">_x000D_
<ul>_x000D_
<li><a data-toggle="collapse" href="#collapseExample" role="button">Shop</a>_x000D_
<div class="collapse" id="collapseExample">_x000D_
<ul>_x000D_
<li><a href="#">List 1</a></li>_x000D_
<li><a href="#">List 2</a></li>_x000D_
<li><a href="#">List 3</a></li>_x000D_
</ul>_x000D_
<ul>_x000D_
<li><a href="#">List 1</a></li>_x000D_
<li><a href="#">List 2</a></li>_x000D_
<li><a href="#">List 3</a></li>_x000D_
</ul>_x000D_
</div>_x000D_
</li>_x000D_
<li><a href="#">Made To Order</a></li>_x000D_
<li><a href="#">Heritage</a></li>_x000D_
<li><a href="#">Style & Fit</a></li>_x000D_
<li><a href="#">Sign In</a></li>_x000D_
</ul>_x000D_
</nav>_x000D_
</div>_x000D_
</div>_x000D_
</div>
_x000D_
Source: Stackoverflow.com