Modal Size

React Bootstrap 5 Modal Size 

Responsive React popup window sizing with Bootstrap 5. Modal width, modal height, fullscreen modal, large modal with lg & xl modal classes and more.

Modal Size

Modals have three optional sizes, available via modifier props to be placed on a MDBModalDialog. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.

Size Class Modal max-width
Small .modal-sm 300px
Default None 500px
Large .modal-lg 800px
Extra large .modal-xl 1140px
Show code

Fullscreen Modal

Another override is the option to pop up a modal that covers the user viewport, available via modifier props that are placed on a MDBModalDialog.

Class Availability
.modal-fullscreen Always
.modal-fullscreen-sm-down Below 576px
.modal-fullscreen-md-down Below 768px
.modal-fullscreen-lg-down Below 992px
.modal-fullscreen-xl-down Below 1200px
.modal-fullscreen-xxl-down Below 1400px
Show code