Платформа Bootstrap 3 и 4 позволяет настраивать размер модального окна. Для этого в этой платформе имеются 2 дополнительных класса: .modal-lg (увеличивает ширину модального окна) и .modal-sm (уменьшает ширину модального окна).
Чтобы изменить размер модального окна один из этих классов необходимо дополнительно поместить рядом с классом .modal-dialog.
<!-- Кнопка, открывающая широкое модальное окно -->
<button class="btn btn-primary" data-toggle="modal" data-target="#largeModal">Открыть ширикое модальное окно </button>
<!-- Широкое модальное окно -->
<div id="largeModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!--...-->
</div>
</div>
</div>
<!-- Кнопка, открывающая узкое модальное окно -->
<button class="btn btn-primary" data-toggle="modal" data-target="#smallModal">Открыть узкое модальное окно </button>
<!-- Узкое модальное окно -->
<div id="smallModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<!--...-->
</div>
</div>
</div>
