Modal

React Bootstrap 5 Modal component

Use MDB modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Note: Read the API tab to find all available options and advanced customization


Basic example

Click the button to launch the modal.

        
            
          import React, { useState } from 'react';
          import {
            MDBBtn,
            MDBModal,
            MDBModalDialog,
            MDBModalContent,
            MDBModalHeader,
            MDBModalTitle,
            MDBModalBody,
            MDBModalFooter, 
          } from 'mdb-react-ui-kit';
          
          export default function App() {
            const [basicModal, setBasicModal] = useState(false);

            const toggleOpen = () => setBasicModal(!basicModal);

            return (
              <>
                <MDBBtn onClick={toggleOpen}>LAUNCH DEMO MODAL</MDBBtn>
                <MDBModal open={basicModal} onClose={() => setBasicModal(false)} tabIndex='-1'>
                  <MDBModalDialog>
                    <MDBModalContent>
                      <MDBModalHeader>
                        <MDBModalTitle>Modal title</MDBModalTitle>
                        <MDBBtn className='btn-close' color='none' onClick={toggleOpen}></MDBBtn>
                      </MDBModalHeader>
                      <MDBModalBody>...</MDBModalBody>
    
                      <MDBModalFooter>
                        <MDBBtn color='secondary' onClick={toggleOpen}>
                          Close
                        </MDBBtn>
                        <MDBBtn>Save changes</MDBBtn>
                      </MDBModalFooter>
                    </MDBModalContent>
                  </MDBModalDialog>
                </MDBModal>
              </>
            );
          }
          
        
    

Advanced examples

Click the buttons to launch the modals.

Frame modal

MDB graphics

Position


Side modal

MDB graphics

Position




Central modal

MDB graphics

Size






How it works

Before getting started with MDB modal component, be sure to read the following as our menu options have recently changed.

  • Modals are positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead.
  • Clicking on the modal “backdrop” will automatically close the modal.
  • Bootstrap only supports one modal window at a time. Nested modals aren’t supported as we believe them to be poor user experiences.
  • Modals use position: fixed, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You’ll likely run into issues when nesting a MDBModal within another fixed element.
  • Once again, due to position: fixed, there are some caveats with using modals on mobile devices.
  • Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:
        
            
            import React, { useEffect, useRef, useState } from 'react';
            import {
              MDBBtn,
              MDBModal,
              MDBModalDialog,
              MDBModalContent,
              MDBModalHeader,
              MDBModalTitle,
              MDBModalBody,
              MDBModalFooter,
              MDBInput,
            } from 'mdb-react-ui-kit';

            export default function App() {
              const [open, setOpen] = useState(false);
              const inputRef = useRef(null);

              useEffect(() => {
                if (open) {
                  inputRef.current?.focus();
                }
              }, [open]);

              return (
                <>
                  <MDBBtn onClick={() => setOpen(!open)}>LAUNCH DEMO MODAL</MDBBtn>
                  <MDBModal open={open} setOpen={setOpen} tabIndex={-1}>
                    <MDBModalDialog>
                      <MDBModalContent>
                        <MDBModalHeader>
                          <MDBModalTitle>Modal title</MDBModalTitle>
                          <MDBBtn className='btn-close' color='none' onClick={() => setOpen(!open)}></MDBBtn>
                        </MDBModalHeader>
                        <MDBModalBody>
                          <MDBInput ref={inputRef} />
                        </MDBModalBody>

                        <MDBModalFooter>
                          <MDBBtn type='button' onClick={() => setOpen(!open)}>
                            Close
                          </MDBBtn>
                        </MDBModalFooter>
                      </MDBModalContent>
                    </MDBModalDialog>
                  </MDBModal>
                </>
              );
            }
          
        
    

Modal components

Below is a static modal example (meaning its position and display have been overridden). Included are the modal header, modal body (required for padding), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.

        
            
          import React, { useState } from 'react';
          import {
            MDBBtn,
            MDBModal,
            MDBModalDialog,
            MDBModalContent,
            MDBModalHeader,
            MDBModalTitle,
            MDBModalBody,
            MDBModalFooter, 
          } from 'mdb-react-ui-kit';
          
          export default function App() {
            const [basicModal, setBasicModal] = useState(false);

            const toggleOpen = () => setBasicModal(!basicModal);

            return (
              <>
                <MDBBtn onClick={toggleOpen}>LAUNCH DEMO MODAL</MDBBtn>
                <MDBModal open={basicModal} onClose={() => setBasicModal(false)} tabIndex='-1'>
                  <MDBModalDialog>
                    <MDBModalContent>
                      <MDBModalHeader>
                        <MDBModalTitle>Modal title</MDBModalTitle>
                        <MDBBtn className='btn-close' color='none' onClick={toggleOpen}></MDBBtn>
                      </MDBModalHeader>
                      <MDBModalBody>Modal body text goes here.</MDBModalBody>
    
                      <MDBModalFooter>
                        <MDBBtn color='secondary' onClick={toggleOpen}>
                          Close
                        </MDBBtn>
                        <MDBBtn>Save changes</MDBBtn>
                      </MDBModalFooter>
                    </MDBModalContent>
                  </MDBModalDialog>
                </MDBModal>
              </>
            );
          }
          
        
    

Position

To change the position of the modal add one of the following props to the MDBModalDialog

Top right: side + position="top-right"

Top left: side + position="top-left"

Bottom right: side + position="bottom-right"

Bottom left: side + position="bottom-left"

Note: If you want to change the direction of modal animation, add the prop{' '} animationDirection, top, bottom or left to the{' '} Modal component.

        
            
            import React, { useState } from 'react';
            import {
              MDBBtn,
              MDBModal,
              MDBModalDialog,
              MDBModalContent,
              MDBModalHeader,
              MDBModalTitle,
              MDBModalBody,
              MDBModalFooter, 
            } from 'mdb-react-ui-kit';
            
            export default function App() {
              const [topRightModal, setTopRightModal] = useState(false);
  
              const toggleOpen = () => setTopRightModal(!topRightModal);
  
              return (
                <>
                  <MDBBtn onClick={toggleOpen}>Top right</MDBBtn>
                  
                  <MDBModal
                    animationDirection='right'
                    open={topRightModal}
                    tabIndex='-1'
                    onClose={() => setTopRightModal(false)}
                  >
                    <MDBModalDialog position='top-right' side>
                      <MDBModalContent>
                        <MDBModalHeader className='bg-info text-white'>
                          <MDBModalTitle>Product in the cart</MDBModalTitle>
                          <MDBBtn
                            color='none'
                            className='btn-close btn-close-white'
                            onClick={toggleOpen}
                          ></MDBBtn>
                        </MDBModalHeader>
                        <MDBModalBody>
                          <div className='row'>
                            <div className='col-3 text-center'>
                              <i className='fas fa-shopping-cart fa-4x text-info'></i>
                            </div>

                            <div className='col-9'>
                              <p>Do you need more time to make a purchase decision?</p>
                              <p>No pressure, your product will be waiting for you in the cart.</p>
                            </div>
                          </div>
                        </MDBModalBody>
                        <MDBModalFooter>
                          <MDBBtn color='info'>Go to the cart</MDBBtn>
                          <MDBBtn outline color='info' onClick={toggleOpen}>
                            Close
                          </MDBBtn>
                        </MDBModalFooter>
                      </MDBModalContent>
                    </MDBModalDialog>
                  </MDBModal>
                </>
              );
            }
            
        
    

Frame

To make the modal "frame-like" add frame prop to the MDBModalDialog element. You also need to specify the direction by adding position="bottom" or position="top" to the MDBModalDialog.

        
            
          import React, { useState } from 'react';
          import { MDBBtn, MDBModal, MDBModalDialog, MDBModalContent, MDBModalBody } from 'mdb-react-ui-kit';
          
          export default function App() {
            const [bottomModal, setBottomModal] = useState(false);
          
            const toggleOpen = () => setBottomModal(!bottomModal);
          
            return (
              <>
                <MDBBtn onClick={toggleOpen}>Launch frame modal</MDBBtn>
          
                <MDBModal animationDirection='bottom' open={bottomModal} tabIndex='-1' onClose={() => setBottomModal(false)}>
                  <MDBModalDialog position='bottom' frame>
                    <MDBModalContent>
                      <MDBModalBody className='py-1'>
                        <div className='d-flex justify-content-center align-items-center my-3'>
                          <p className='mb-0'>We use cookies to improve your website experience</p>
                          <MDBBtn color='success' size='sm' className='ms-2' onClick={toggleOpen}>
                            Ok, thanks
                          </MDBBtn>
                          <MDBBtn size='sm' className='ms-2'>
                            Learn more
                          </MDBBtn>
                        </div>
                      </MDBModalBody>
                    </MDBModalContent>
                  </MDBModalDialog>
                </MDBModal>
              </>
            );
          }          
          
        
    

Static backdrop

When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.

        
            
          import React, { useState } from 'react';
          import {
            MDBBtn,
            MDBModal,
            MDBModalDialog,
            MDBModalContent,
            MDBModalHeader,
            MDBModalTitle,
            MDBModalBody,
            MDBModalFooter, 
          } from 'mdb-react-ui-kit';
          
          export default function App() {
            const [staticModal, setStaticModal] = useState(false);

            const toggleOpen = () => setStaticModal(!staticModal);

            return (
              <>
                <MDBBtn onClick={toggleOpen}>Launch static backdrop modal</MDBBtn>

                <MDBModal staticBackdrop tabIndex='-1' open={staticModal} onClose={() => setStaticModal(false)}>
                  <MDBModalDialog>
                    <MDBModalContent>
                      <MDBModalHeader>
                        <MDBModalTitle>Modal title</MDBModalTitle>
                        <MDBBtn className='btn-close' color='none' onClick={toggleOpen}></MDBBtn>
                      </MDBModalHeader>
                      <MDBModalBody>...</MDBModalBody>
                      <MDBModalFooter>
                        <MDBBtn color='secondary' onClick={toggleOpen}>
                          Close
                        </MDBBtn>
                        <MDBBtn>Understood</MDBBtn>
                      </MDBModalFooter>
                    </MDBModalContent>
                  </MDBModalDialog>
                </MDBModal>
              </>
            );
          }
          
        
    

Scrolling long content

When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.

You can also create a scrollable modal that allows scroll the modal body by adding scrollable to MDBModalDialog.

        
            
          import React, { useState } from 'react';
          import {
            MDBBtn,
            MDBModal,
            MDBModalDialog,
            MDBModalContent,
            MDBModalHeader,
            MDBModalTitle,
            MDBModalBody,
            MDBModalFooter, 
          } from 'mdb-react-ui-kit';
          
          export default function App() {
            const [scrollableModal, setScrollableModal] = useState(false);

            return (
              <>
                <MDBBtn onClick={() => setScrollableModal(!scrollableModal)}>LAUNCH DEMO MODAL</MDBBtn>

                <MDBModal open={scrollableModal} onClose={() => setScrollableModal(false)} tabIndex='-1'>
                  <MDBModalDialog scrollable>
                    <MDBModalContent>
                      <MDBModalHeader>
                        <MDBModalTitle>Modal title</MDBModalTitle>
                        <MDBBtn
                          className='btn-close'
                          color='none'
                          onClick={() => setScrollableModal(false)}
                        ></MDBBtn>
                      </MDBModalHeader>
                      <MDBModalBody>
                        <p>
                          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
                          egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
                        </p>
                        <p>
                          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel
                          augue laoreet rutrum faucibus dolor auctor.
                        </p>
                        <p>
                          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
                          consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
                        </p>
                        <p>
                          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
                          egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
                        </p>
                        <p>
                          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel
                          augue laoreet rutrum faucibus dolor auctor.
                        </p>
                        <p>
                          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
                          consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
                        </p>
                        <p>
                          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
                          egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
                        </p>
                        <p>
                          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel
                          augue laoreet rutrum faucibus dolor auctor.
                        </p>
                        <p>
                          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
                          consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
                        </p>
                        <p>
                          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
                          egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
                        </p>
                        <p>
                          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel
                          augue laoreet rutrum faucibus dolor auctor.
                        </p>
                        <p>
                          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
                          consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
                        </p>
                        <p>
                          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
                          egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
                        </p>
                        <p>
                          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel
                          augue laoreet rutrum faucibus dolor auctor.
                        </p>
                        <p>
                          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
                          consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
                        </p>
                        <p>
                          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
                          egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
                        </p>
                        <p>
                          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel
                          augue laoreet rutrum faucibus dolor auctor.
                        </p>
                        <p>
                          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
                          consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
                        </p>
                      </MDBModalBody>
                      <MDBModalFooter>
                        <MDBBtn color='secondary' onClick={() => setScrollableModal(!setScrollableModal)}>
                          Close
                        </MDBBtn>
                        <MDBBtn>Save changes</MDBBtn>
                      </MDBModalFooter>
                    </MDBModalContent>
                  </MDBModalDialog>
                </MDBModal>
              </>
            );
          }
          
        
    

Vertically centered

Add centered to MDBModalDialog to vertically center the modal.

        
            
          import React, { useState } from 'react';
          import {
            MDBBtn,
            MDBModal,
            MDBModalDialog,
            MDBModalContent,
            MDBModalHeader,
            MDBModalTitle,
            MDBModalBody,
            MDBModalFooter, 
          } from 'mdb-react-ui-kit';
          
          export default function App() {
            const [centredModal, setCentredModal] = useState(false);

            const toggleOpen = () => setCentredModal(!centredModal);

            return (
              <>
                <MDBBtn onClick={toggleOpen}>Vertically centered modal</MDBBtn>

                <MDBModal tabIndex='-1' open={centredModal} onClose={() => setCentredModal(false)}>
                  <MDBModalDialog centered>
                    <MDBModalContent>
                      <MDBModalHeader>
                        <MDBModalTitle>Modal title</MDBModalTitle>
                        <MDBBtn className='btn-close' color='none' onClick={toggleOpen}></MDBBtn>
                      </MDBModalHeader>
                      <MDBModalBody>
                        <p>
                          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
                          egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
                        </p>
                      </MDBModalBody>
                      <MDBModalFooter>
                        <MDBBtn color='secondary' onClick={toggleOpen}>
                          Close
                        </MDBBtn>
                        <MDBBtn>Save changes</MDBBtn>
                      </MDBModalFooter>
                    </MDBModalContent>
                  </MDBModalDialog>
                </MDBModal>
              </>
            );
          }
          
        
    

Tooltips and popovers

Tooltips and popovers can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.

        
            
          import React, { useState } from 'react';
          import { 
            MDBBtn,
            MDBModal,
            MDBModalDialog,
            MDBModalContent,
            MDBModalHeader,
            MDBModalTitle,
            MDBModalBody,
            MDBModalFooter,
            MDBPopover,
            MDBPopoverHeader,
            MDBPopoverBody,
            MDBTooltip
          } from 'mdb-react-ui-kit';
          
          export default function App() {
            const [popoverModal, setPopoverModal] = useState(false);

            const toggleOpen = () => setPopoverModal(!popoverModal);

            return (
              <>
                <MDBBtn onClick={toggleOpen}>Launch demo modal</MDBBtn>

                <MDBModal tabIndex='-1' open={popoverModal} onClose={() => setPopoverModal(false)}>
                  <MDBModalDialog>
                    <MDBModalContent>
                      <MDBModalHeader>
                        <MDBModalTitle>Modal title</MDBModalTitle>
                        <MDBBtn className='btn-close' color='none' onClick={toggleOpen}></MDBBtn>
                      </MDBModalHeader>
                      <MDBModalBody>
                        <h5>Popover in a modal</h5>
                        <p>
                          This
                          <MDBPopover isOpen={popoverModal} color='secondary' btnChildren='button' placement='right'>
                            <MDBPopoverHeader>Popover title</MDBPopoverHeader>
                            <MDBPopoverBody>Popover body content is set in this attribute.</MDBPopoverBody>
                          </MDBPopover>
                          triggers a popover on click.
                        </p>
                        <hr />
                        <h5>Tooltips in a modal</h5>
                        <p>
                          <MDBTooltip tag='a' wrapperProps={{ href: '#!' }} title='Tooltip'>
                            This link
                          </MDBTooltip>{' '}
                          and{' '}
                          <MDBTooltip tag='a' wrapperProps={{ href: '#!' }} title='Tooltip'>
                            that link
                          </MDBTooltip>{' '}
                          have tooltips on hover.
                        </p>
                      </MDBModalBody>

                      <MDBModalFooter>
                        <MDBBtn color='secondary' onClick={toggleOpen}>
                          Close
                        </MDBBtn>
                        <MDBBtn>Save changes</MDBBtn>
                      </MDBModalFooter>
                    </MDBModalContent>
                  </MDBModalDialog>
                </MDBModal>
              </>
            );
          }
          
        
    

Using the grid

Utilize the Bootstrap grid system within a modal by nesting .container-fluid within the .modal-body. Then, use the normal grid system classes as you would anywhere else.

        
            
          import React, { useState } from 'react';
          import {
            MDBBtn,
            MDBModal,
            MDBModalDialog,
            MDBModalContent,
            MDBModalHeader,
            MDBModalTitle,
            MDBModalBody,
            MDBModalFooter, 
          } from 'mdb-react-ui-kit';
          
          export default function App() {
            const [gridModal, setGridModal] = useState(false);

            const toggleOpen = () => setGridModal(!gridModal);

            return (
              <>
                <MDBBtn onClick={toggleOpen}>Launch demo modal</MDBBtn>

                <MDBModal tabIndex='-1' open={gridModal} onClose={() => setGridModal(false)}>
                  <MDBModalDialog>
                    <MDBModalContent>
                      <MDBModalHeader>
                        <MDBModalTitle>Grids in modals</MDBModalTitle>
                        <MDBBtn
                          type='button'
                          className='btn-close'
                          color='none'
                          onClick={toggleOpen}
                        ></MDBBtn>
                      </MDBModalHeader>
                      <MDBModalBody>
                        <div className='container-fluid bd-example-row'>
                          <div className='row'>
                            <div className='col-md-4 col-example'>.col-md-4</div>
                            <div className='col-md-4 ms-auto col-example'>.col-md-4 .ms-auto</div>
                          </div>
                          <div className='row'>
                            <div className='col-md-3 ms-auto col-example'>.col-md-3 .ms-auto</div>
                            <div className='col-md-2 ms-auto col-example'>.col-md-2 .ms-auto</div>
                          </div>
                          <div className='row'>
                            <div className='col-md-6 ms-auto col-example'>.col-md-6 .ms-auto</div>
                          </div>
                          <div className='row'>
                            <div className='col-sm-9 col-example'>
                              Level 1: .col-sm-9
                              <div className='row'>
                                <div className='col-8 col-sm-6 col-example'>Level 2: .col-8 .col-sm-6</div>
                                <div className='col-4 col-sm-6 col-example'>Level 2: .col-4 .col-sm-6</div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </MDBModalBody>
                      <MDBModalFooter>
                        <MDBBtn color='secondary' onClick={toggleOpen}>
                          Close
                        </MDBBtn>
                        <MDBBtn>Save changes</MDBBtn>
                      </MDBModalFooter>
                    </MDBModalContent>
                  </MDBModalDialog>
                </MDBModal>
              </>
            );
          }
          
        
    

Varying modal content

Have a bunch of buttons that all trigger the same modal with slightly different contents? Use event.relatedTarget and HTML data-mdb-* attributes to vary the contents of the modal depending on which button was clicked.

Below is a live demo followed by example HTML and JavaScript. For more information, read the modal API/events doc for details on relatedTarget.

        
            
          import React, { ChangeEvent, useState } from 'react';
          import {
            MDBBtn,
            MDBModal,
            MDBModalDialog,
            MDBModalContent,
            MDBModalHeader,
            MDBModalTitle,
            MDBModalBody,
            MDBModalFooter,
            MDBTextArea,
            MDBInput,
          } from 'mdb-react-ui-kit';

          export default function App() {
            const [varyingState, setVaryingState] = useState('');
            const [varyingModal, setVaryingModal] = useState(false);
            const [varyingRecipient, setVaryingRecipient] = useState('');
            const [varyingMessage, setVaryingMessage] = useState('');

            const onChangeRecipient = (event: ChangeEvent<HTMLInputElement>) => {
              setVaryingRecipient(event.target.value);
            };

            const onChangeMessage = (event: ChangeEvent<HTMLTextAreaElement>) => {
              setVaryingMessage(event.target.value);
            };

            return (
              <>
                <MDBBtn
                  onClick={() => {
                    setVaryingState('@mdo');
                    setVaryingModal(!varyingModal);
                    setVaryingRecipient('@mdo');
                  }}
                >
                  Open modal for @mdo
                </MDBBtn>
                <MDBBtn
                  onClick={() => {
                    setVaryingState('@fat');
                    setVaryingModal(!varyingModal);
                    setVaryingRecipient('@fat');
                  }}
                >
                  Open modal for @fat
                </MDBBtn>
                <MDBBtn
                  onClick={() => {
                    setVaryingState('@getbootstrap');
                    setVaryingModal(!varyingModal);
                    setVaryingRecipient('@getbootstrap');
                  }}
                >
                  Open modal for @getbootstrap
                </MDBBtn>

                <MDBModal open={varyingModal} onClose={() => setVaryingModal(false)} tabIndex='-1'>
                  <MDBModalDialog>
                    <MDBModalContent>
                      <MDBModalHeader>
                        <MDBModalTitle>New message to {varyingState}</MDBModalTitle>
                        <MDBBtn className='btn-close' color='none' onClick={() => setVaryingModal(false)}></MDBBtn>
                      </MDBModalHeader>
                      <MDBModalBody>
                        <form>
                          <div className='mb-3'>
                            {varyingModal && (
                              <MDBInput
                                value={varyingRecipient}
                                onChange={onChangeRecipient}
                                labelClass='col-form-label'
                                label='Recipient:'
                              />
                            )}
                          </div>
                          <div className='mb-3'>
                            {varyingModal && (
                              <MDBTextArea
                                value={varyingMessage}
                                onChange={onChangeMessage}
                                labelClass='col-form-label'
                                label='Message:'
                              />
                            )}
                          </div>
                        </form>
                      </MDBModalBody>
                      <MDBModalFooter>
                        <MDBBtn color='secondary' onClick={() => setVaryingModal(!varyingModal)}>
                          Close
                        </MDBBtn>
                        <MDBBtn>Save changes</MDBBtn>
                      </MDBModalFooter>
                    </MDBModalContent>
                  </MDBModalDialog>
                </MDBModal>
              </>
            );
          }
          
        
    

Toggle between modals

Toggle between multiple modals with some clever placement of the data-mdb-target and data-mdb-toggle attributes. For example, you could toggle a password reset modal from within an already open sign in modal. Please note multiple modals cannot be open at the same time—this method simply toggles between two separate modals.

Below is a live demo followed by example HTML and JavaScript. For more information, read the modal API/events doc for details on relatedTarget.

Open first modal
        
            
          import React, { useState } from 'react';
          import {
            MDBBtn,
            MDBModal,
            MDBModalDialog,
            MDBModalContent,
            MDBModalHeader,
            MDBModalTitle,
            MDBModalBody,
            MDBModalFooter, 
          } from 'mdb-react-ui-kit';
          
          export default function App() {
            const [toggleOneModal, setToggleOneModal] = useState(false);
            const [toggleTwoModal, setToggleTwoModal] = useState(false);
            
            return (
              <>
                <MDBBtn onClick={() => setToggleOneModal(!toggleOneModal)}>OPEN FIRST MODAL</MDBBtn>

                <MDBModal open={toggleOneModal} onClose={() => setToggleOneModal(false)} tabIndex='-1'>
                  <MDBModalDialog centered>
                    <MDBModalContent>
                      <MDBModalHeader>
                        <MDBModalTitle>Modal 1</MDBModalTitle>
                        <MDBBtn
                          className='btn-close'
                          color='none'
                          onClick={() => setToggleOneModal(!toggleOneModal)}
                        ></MDBBtn>
                      </MDBModalHeader>
                      <MDBModalBody>Show a second modal and hide this one with the button below.</MDBModalBody>
                      <MDBModalFooter>
                        <MDBBtn
                          onClick={() => {
                            setToggleOneModal(!toggleOneModal);
                            setTimeout(() => {
                              setToggleTwoModal(!toggleTwoModal);
                            }, 400);
                          }}
                        >
                          Open second modal
                        </MDBBtn>
                      </MDBModalFooter>
                    </MDBModalContent>
                  </MDBModalDialog>
                </MDBModal>
    
                <MDBModal open={toggleTwoModal} onClose={() => setToggleTwoModal(false)} tabIndex='-1'>
                  <MDBModalDialog centered>
                    <MDBModalContent>
                      <MDBModalHeader>
                        <MDBModalTitle>Modal 2</MDBModalTitle>
                        <MDBBtn
                          className='btn-close'
                          color='none'
                          onClick={() => setToggleTwoModal(!toggleTwoModal)}
                        ></MDBBtn>
                      </MDBModalHeader>
                      <MDBModalBody>Close this modal and show the first with the button below.</MDBModalBody>
                      <MDBModalFooter>
                        <MDBBtn
                          onClick={() => {
                            setToggleTwoModal(!toggleTwoModal);
                            setTimeout(() => {
                              setToggleOneModal(!toggleOneModal);
                            }, 400);
                          }}
                        >
                          Back to first
                        </MDBBtn>
                      </MDBModalFooter>
                    </MDBModalContent>
                  </MDBModalDialog>
                </MDBModal>
              </>
            );
          }
          
        
    

Accessibility

Be sure to add aria-labelledby="...", referencing the modal title, to MDBModal. Additionally, you may give a description of your modal dialog with aria-describedby on MDBModal.


Embedding YouTube videos

Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. See this helpful Stack Overflow post for more information.


Optional sizes

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 Prop Modal max-width
Small size="sm" 300px
Default None 500px
Large size="lg" 800px
Extra large size="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 toggleOpen = () => setOptSmModal(!optSmModal);

            return (
              <>
                <MDBBtn onClick={toggleOpen}>Small modal</MDBBtn>
                <MDBModal open={optSmModal} tabIndex='-1' onClose={() => setOptSmModal(false)}>
                  <MDBModalDialog size='sm'>
                    <MDBModalContent>
                      <MDBModalHeader>
                        <MDBModalTitle>Small modal</MDBModalTitle>
                        <MDBBtn className='btn-close' color='none' onClick={toggleOpen}></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.

Prop Availability
size="fullscreen" Always
size="fullscreen-sm-down" Below 576px
size="fullscreen-md-down" Below 768px
size="fullscreen-lg-down" Below 992px
size="fullscreen-xl-down" Below 1200px
size="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 toggleOpen = () => setFullscreenXlModal(!fullscreenXlModal);

            return (
              <> 
                <MDBBtn onClick={toggleOpen}>Full screen below xl</MDBBtn>
                <MDBModal tabIndex='-1' open={fullscreenXlModal} onClose={() => setFullscreenXlModal(false)}>
                  <MDBModalDialog size='fullscreen-xl-down'>
                    <MDBModalContent>
                      <MDBModalHeader>
                        <MDBModalTitle>Full screen below xl</MDBModalTitle>
                        <MDBBtn
                          type='button'
                          className='btn-close'
                          color='none'
                          onClick={toggleOpen}
                        ></MDBBtn>
                      </MDBModalHeader>
                      <MDBModalBody>...</MDBModalBody>
                      <MDBModalFooter>
                        <MDBBtn type='button' color='secondary' onClick={toggleOpen}>
                          Close
                        </MDBBtn>
                      </MDBModalFooter>
                    </MDBModalContent>
                  </MDBModalDialog>
                </MDBModal>
              </>
            );
          }
          
        
    

Non-invasive Modal

This type of modal does not block any interaction on the page. Simply set nonInvasive property to true.

        
            
          import React, { useState } from 'react';
          import {
            MDBBtn,
            MDBModal,
            MDBModalDialog,
            MDBModalContent,
            MDBModalHeader,
            MDBModalTitle,
            MDBModalBody,
            MDBModalFooter,
          } from 'mdb-react-ui-kit';
          
          export default function App() {
            const [nonInvasiveModal, setNonInvasiveModal] = useState(false);
          
            const toggleOpen = () => setNonInvasiveModal(!nonInvasiveModal);
          
            return (
              <>
                <MDBBtn onClick={toggleOpen}>Non Invasive Modal</MDBBtn>
                <MDBModal tabIndex={-1} open={nonInvasiveModal} onClose={() => setNonInvasiveModal(false)} nonInvasive={true}>
                  <MDBModalDialog size='fullscreen-xl-down'>
                    <MDBModalContent>
                      <MDBModalHeader>
                        <MDBModalTitle>Non Invasive Modal</MDBModalTitle>
                        <MDBBtn type='button' className='btn-close' color='none' onClick={toggleOpen}></MDBBtn>
                      </MDBModalHeader>
                      <MDBModalBody>...</MDBModalBody>
                      <MDBModalFooter>
                        <MDBBtn type='button' color='secondary' onClick={toggleOpen}>
                          Close
                        </MDBBtn>
                      </MDBModalFooter>
                    </MDBModalContent>
                  </MDBModalDialog>
                </MDBModal>
              </>
            );
          }
          
          
        
    

Modal - API


Import

        
            
      import {
        MDBModal,
        MDBModalDialog,
        MDBModalContent,
        MDBModalHeader,
        MDBModalTitle,
        MDBModalBody,
        MDBModalFooter, 
      } from 'mdb-react-ui-kit';
     
        
    

Properties

MDBModal

Name Type Default Description Example
animationDirection String '' Defines animation direction of the modal <MDBModal animationDirection="top" />
appendToBody Boolean false Appends element to the end of the body <MDBModal appendToBody />
backdrop Boolean true Sets a backrop for modal <MDBModal backdrop={false} />
closeOnEsc Boolean true Allows to close modal on Escape keydown <MDBModal closeOnEsc={false} />
leaveHiddenModal Boolean true Defines whether the hidden modal stays in VDOM <MDBModal leaveHiddenModal={false} />
modalRef Reference '' Reference to the modal element <MDBModal modalRef={modalReference} />
nonInvasive Boolean false Changes the type of modal to Non-Invasive modal <MDBModal nonInvasive={true} />
setOpen React.SetStateAction '' Allows to pass the setState action to the Modal component which defines if modal is opened or not <MDBModal setOpen={setExample} />
open Boolean false Sets visibility of the modal <MDBModal open={true} />
staticBackdrop Boolean false Creates static backdrop for the modal <MDBModal staticBackdrop />
tag String 'div' Defines tag of the MDBModal element <MDBModal tag="section" />

MDBModalDialog

Name Type Default Description Example
centered Boolean false Vertically centeres modal dialog window <MDBModalDialog centered />
scrollable Boolean false Allows to scroll through long contents with a scrollbar <MDBModalDialog scrollable />
size String '' Defines the size of MDBModal component. <MDBModalDialog size="lg" />
tag String 'div' Defines tag of the MDBModalDialog element <MDBModalDialog tag="section" />

MDBModalContent

Name Type Default Description Example
tag String 'div' Defines tag of the MDBModalContent element <MDBModalContent tag="section" />

MDBModalHeader

Name Type Default Description Example
tag String 'div' Defines tag of the MDBModalHeader element <MDBModalHeader tag="section" />

MDBModalTitle

Name Type Default Description Example
tag String 'h5' Defines tag of the MDBModalTitle element <MDBModalTitle tag="h3" />

MDBModalBody

Name Type Default Description Example
tag String 'div' Defines tag of the MDBModalBody element <MDBModalBody tag="section" />

Events

Name Type Description
onClose () => any Fired when the modal demands to be closed.
onClosePrevented () => any This event is fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option.
onOpen () => any Fires when the modal demands to be opened.

CSS variables

As part of MDB’s evolving CSS variables approach, modal now use local CSS variables on .modal for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

Modal's CSS variables are in different classes which belong to this component. To make it easier to use them, you can find below all of the used CSS variables.

        
            
        // Variables for modal free
        // .modal
        --#{$prefix}modal-zindex: #{$zindex-modal};
        --#{$prefix}modal-width: #{$modal-md};
        --#{$prefix}modal-padding: #{$modal-inner-padding};
        --#{$prefix}modal-margin: #{$modal-dialog-margin};
        --#{$prefix}modal-color: #{$modal-content-color};
        --#{$prefix}modal-bg: #{$modal-content-bg};
        --#{$prefix}modal-border-color: #{$modal-content-border-color};
        --#{$prefix}modal-border-width: #{$modal-content-border-width};
        --#{$prefix}modal-border-radius: #{$modal-content-border-radius};
        --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
        --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
        --#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
        --#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
        --#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
        --#{$prefix}modal-header-border-color: #{$modal-header-border-color};
        --#{$prefix}modal-header-border-width: #{$modal-header-border-width};
        --#{$prefix}modal-title-line-height: #{$modal-title-line-height};
        --#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};
        --#{$prefix}modal-footer-bg: #{$modal-footer-bg};
        --#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
        --#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};

        // .modal-backdrop
        --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
        --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
        --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};

        // .modal
        --#{$prefix}modal-margin: #{$modal-dialog-margin-y-sm-up};
        --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-sm-up};

        // .modal-sm
        --#{$prefix}modal-width: #{$modal-sm};

        // .modal-lg,
        // .modal-xl
        --#{$prefix}modal-width: #{$modal-lg};

        // .modal-xl
        --#{$prefix}modal-width: #{$modal-xl};

        // .modal-content
        --#{$prefix}modal-box-shadow: #{$modal-box-shadow};

        // Variables for modal pro
        // .modal
        --#{$prefix}modal-top-left-top: #{$modal-top-left-top};
        --#{$prefix}modal-top-left-left: #{$modal-top-left-left};
        --#{$prefix}modal-top-right-top: #{$modal-top-right-top};
        --#{$prefix}modal-top-right-right: #{$modal-top-right-right};
        --#{$prefix}modal-bottom-left-bottom: #{$modal-bottom-left-bottom};
        --#{$prefix}modal-bottom-left-left: #{$modal-bottom-left-left};
        --#{$prefix}modal-bottom-right-bottom: #{$modal-bottom-right-bottom};
        --#{$prefix}modal-bottom-right-right: #{$modal-bottom-right-right};
        --#{$prefix}modal-fade-top-transform: #{$modal-fade-top-transform};
        --#{$prefix}modal-fade-right-transform: #{$modal-fade-right-transform};
        --#{$prefix}modal-fade-bottom-transform: #{$modal-fade-bottom-transform};
        --#{$prefix}modal-fade-left-transform: #{$modal-fade-left-transform};
        --#{$prefix}modal-side-right: #{$modal-side-right};
        --#{$prefix}modal-side-bottom: #{$modal-side-bottom};
        --#{$prefix}modal-non-invasive-box-shadow: #{$modal-non-invasive-box-shadow};
        --#{$prefix}modal-non-invasive-box-shadow-top: #{$modal-non-invasive-box-shadow-top};
        
        
    

SCSS variables

        
            
        // Variables for modal free
        $modal-inner-padding: $spacer;

        $modal-footer-margin-between: 0.5rem;

        $modal-dialog-margin: 0.5rem;
        $modal-dialog-margin-y-sm-up: 1.75rem;

        $modal-title-line-height: $line-height-base;

        $modal-content-color: null;
        $modal-content-bg: $white;
        $modal-content-border-color: var(--#{$prefix}border-color-translucent);
        $modal-content-border-width: $border-width;
        $modal-content-inner-border-radius: subtract(
          $modal-content-border-radius,
          $modal-content-border-width
        );
        $modal-content-box-shadow-xs: $box-shadow-sm;
        $modal-content-box-shadow-sm-up: $box-shadow;

        $modal-backdrop-bg: $black;
        $modal-backdrop-opacity: 0.5;

        $modal-header-padding-y: $modal-inner-padding;
        $modal-header-padding-x: $modal-inner-padding;
        $modal-header-padding: $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility

        $modal-footer-bg: null;

        $modal-sm: 300px;
        $modal-md: 500px;
        $modal-lg: 800px;
        $modal-xl: 1140px;

        $modal-fade-transform: translate(0, -50px);
        $modal-show-transform: none;
        $modal-transition: transform 0.3s ease-out;
        $modal-scale-transform: scale(1.02);

        $modal-box-shadow: $box-shadow-4;
        $modal-content-border-radius: $border-radius-lg;
        $modal-header-border-color: $border-color-alternate;
        $modal-footer-border-color: $border-color-alternate;
        $modal-header-border-width: $border-width-alternate;
        $modal-footer-border-width: $border-width-alternate;

        // Variables for modal pro
        $modal-top-left-top: 10px;
        $modal-top-left-left: 10px;
        $modal-top-right-top: 10px;
        $modal-top-right-right: 10px;
        $modal-bottom-left-bottom: 10px;
        $modal-bottom-left-left: 10px;
        $modal-bottom-right-bottom: 10px;
        $modal-bottom-right-right: 10px;
        $modal-fade-top-transform: translate3d(0, -25%, 0);
        $modal-fade-right-transform: translate3d(25%, 0, 0);
        $modal-fade-bottom-transform: translate3d(0, 25%, 0);
        $modal-fade-left-transform: translate3d(-25%, 0, 0);
        $modal-side-right: 10px;
        $modal-side-bottom: 10px;

        $modal-non-invasive-box-shadow: $box-shadow-3;
        $modal-non-invasive-box-shadow-top: $box-shadow-3-top;