How to increase Bootstrap Modal Width?
In your code, for the modal-dialog
div, add another class, modal-lg
:
<div class="modal-dialog modal-lg">
Or if you wanna centre your modal dialog, use:
.modal-ku {
width: 750px;
margin: auto;
}
The easiest way can be inline style on modal-dialog
div :
<div class="modal" id="myModal">
<div class="modal-dialog" style="width:1250px;">
<div class="modal-content">
...
</div>
</div>
</div>
You can choose between modal-lg
and modal-xl
classes or if you want custom width then, set max-width property with inline css. For example,
<div class="modal-dialog modal-xl" role="document">
or
<div class="modal-dialog" style="max-width: 80%;" role="document">