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