Сергей Харчевников

Платформа 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>