Bootstrap from version 4, has several sizes as already mentioned in other answers. To apply these different sizes, just insert into <div>
who’s with the class modal-dialog
the classes: modal-xl
if you want a modal extra large, modal-lg
if you want a modal great or modal-sm
if you want a modal small. To div
should look like this, for example:
<div class="modal-dialog modal-xl" role="document">
Notice that the class modal-xl
was allocated next to the class modal-dialog
. Below I will leave an example made with the three sizes mentioned, taken directly from the Bootstrap documentation:
<!-- Extra large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>
<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
...
</div>
</div>
</div>
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
...
</div>
</div>
</div>
<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>
<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
...
</div>
</div>
</div>
For more information, check out the official Bootstrap v4.4 documentation in the following link: https://getbootstrap.com/docs/4.4/components/modal/
I hope it helped. Hugs!
Did the answer help you solve the question? Need more information?
– Murillo Goulart