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 
        
             
      import React, { useState } from 'react';
      import {
        MDBBtn,
        MDBModal,
        MDBModalDialog,
        MDBModalContent,
        MDBModalHeader,
        MDBModalTitle,
        MDBModalBody
      } from 'mdb-react-ui-kit';
      
      export default function App() {
        const [optSmModal, setOptSmModal] = useState(false);

        const toggleShow = () => setOptSmModal(!optSmModal);

        return (
          <>
            <MDBBtn onClick={toggleShow}>Small modal</MDBBtn>
            <MDBModal show={optSmModal} tabIndex='-1' setShow={setOptSmModal}>
              <MDBModalDialog size='sm'>
                <MDBModalContent>
                  <MDBModalHeader>
                    <MDBModalTitle>Small modal</MDBModalTitle>
                    <MDBBtn className='btn-close' color='none' onClick={toggleShow}></MDBBtn>
                  </MDBModalHeader>
                  <MDBModalBody>...</MDBModalBody>
                </MDBModalContent>
              </MDBModalDialog>
            </MDBModal>
          </>
        );
      }

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 
        
             
      import React, { useState } from 'react';
      import {
        MDBBtn,
        MDBModal,
        MDBModalDialog,
        MDBModalContent,
        MDBModalHeader,
        MDBModalTitle,
        MDBModalBody,
        MDBModalFooter,
      } from 'mdb-react-ui-kit';
      
      export default function App() {
        const [fullscreenXlModal, setFullscreenXlModal] = useState(false);
      
        const toggleShow = () => setFullscreenXlModal(!fullscreenXlModal);
      
        return (
          <>
            <MDBBtn onClick={toggleShow}>Full screen below xl</MDBBtn>
            <MDBModal tabIndex='-1' show={fullscreenXlModal} setShow={setFullscreenXlModal}>
              <MDBModalDialog size='fullscreen-xl-down'>
                <MDBModalContent>
                  <MDBModalHeader>
                    <MDBModalTitle>Full screen below xl</MDBModalTitle>
                    <MDBBtn
                      type='button'
                      className='btn-close'
                      color='none'
                      onClick={toggleShow}
                    ></MDBBtn>
                  </MDBModalHeader>
                  <MDBModalBody>...</MDBModalBody>
                  <MDBModalFooter>
                    <MDBBtn type='button' color='secondary' onClick={toggleShow}>
                      Close
                    </MDBBtn>
                  </MDBModalFooter>
                </MDBModalContent>
              </MDBModalDialog>
            </MDBModal>
          </>
        );
      }