Modal Sizes & Scrollable Modals

<!-- Large Modal -->
<button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#largeModal">Large Modal</button>

<div class="modal fade" id="largeModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Large Modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        This is a large modal.
      </div>
    </div>
  </div>
</div>

<!-- Small Modal -->
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#smallModal">Small Modal</button>

<div class="modal fade" id="smallModal">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Small Modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        This is a small modal.
      </div>
    </div>
  </div>
</div>