O Bootstrap a partir da versão 4, possui diversos tamanhos como já foi citado em outras respostas. Para aplicar esses diferentes tamanhos, basta você inserir na <div>
que está com a classe modal-dialog
as classes: modal-xl
caso queira um modal extra grande, modal-lg
caso queira um modal grande ou modal-sm
caso queira um modal pequeno. A div
deve ficar assim, por exemplo:
<div class="modal-dialog modal-xl" role="document">
Repare que a classe modal-xl
foi alocada ao lado da classe modal-dialog
. Abaixo vou deixar exemplo feito com os três tamanhos citados, retirado direto da documentação do Bootstrap:
<!-- 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>
Para maiores informações, confira a documentação oficial do Bootstrap v4.4 no link a seguir: https://getbootstrap.com/docs/4.4/components/modal/
Espero que tenha ajudado. Abraços!