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> </> ); }