Modal Size

Bootstrap 5 Modal Size

Responsive 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 classes to be placed on a .modal-dialog. 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
Edit in sandbox 
        
            
        <div class="modal-dialog modal-xl">...</div>
        <div class="modal-dialog modal-lg">...</div>
        <div class="modal-dialog modal-sm">...</div>

Fullscreen Modal

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

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
Edit in sandbox 
        
            
        <!-- Full screen modal -->
        <div class="modal-dialog modal-fullscreen-sm-down">...</div>