Modal

Add dialogs to your site for lightboxes, user notifications, or completely custom content.

<div className="modal show" style={{ display: 'block', position: 'initial' }}>
  <Modal.Dialog>
    <Modal.Header closeButton>
      <Modal.Title>Modal title</Modal.Title>
    </Modal.Header>
    <Modal.Body>
      <p>Modal body text goes here.</p>
    </Modal.Body>
    <Modal.Footer>
      <Button variant="secondary">Close</Button>
      <Button variant="primary">Save changes</Button>
    </Modal.Footer>
  </Modal.Dialog>
</div>

Live Demo

A modal with header, body, and set of actions in the footer. Use <Modal> in combination with other components to show or hide your Modal. The<Modal> Component comes with a few convenient "sub components": <Modal.Header>,<Modal.Title>, <Modal.Body>, and <Modal.Footer>, which you can use to build the Modal content.

Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.

Design

Code

const Modals = () => {   
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);
    return (
        <Fragment> 
            <Button variant="primary" onClick={handleShow}>
                Launch demo modal
            </Button>
            <Modal show={show} onHide={handleClose}>
                <Modal.Header closeButton>
                    <Modal.Title>Modal title</Modal.Title>
                </Modal.Header>
                <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
                <Modal.Footer>
                    <Button variant="secondary" onClick={handleClose}>
                        Close
                    </Button>
                    <Button variant="primary" onClick={handleClose}>
                        Save Changes
                    </Button>
                </Modal.Footer>
            </Modal>
        </Fragment>
    )
}

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.

Design

Code

const Modals = () => {   
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);
    const longContent =`<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>`
    
    return (
        <Fragment> 
            <Button variant="primary" onClick={() => setScrollShow(true)}>
                Launch demo modal 
            </Button>
            <Modal show={scrollShow} onHide={() => setScrollShow(false)}>
                <Modal.Header closeButton>
                    <Modal.Title>Modal title</Modal.Title>
                </Modal.Header>
                <Modal.Body dangerouslySetInnerHTML={{__html: longContent}}></Modal.Body>
                <Modal.Footer>
                    <Button variant="secondary" onClick={() => setScrollShow(false)} >
                        Close
                    </Button>
                    <Button variant="primary" onClick={() => setScrollShow(false)}>
                        Save Changes
                    </Button>
                </Modal.Footer>
            </Modal>
        </Fragment>
    )
}

You can also create a scrollable modal that allows scroll the modal body by adding .modal-dialog-scrollable to.modal-dialog and style in <Model.Body>.

Design

Code

const Modals = () => {      
     
    const [scrollShow, setScrollShow] = useState(false);
    const longContent =`<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>`

    return (
        <Fragment> 
            <Button variant="primary" onClick={() => setScrollShow(true)}>
                Launch demo modal 
            </Button>
            <Modal className="modal-dialog-scrollable" show={scrollShow} onHide={() => setScrollShow(false)}  >
                <Modal.Header closeButton>
                    <Modal.Title>Modal title</Modal.Title>
                </Modal.Header>
                <Modal.Body  style={{height:'500px'}} dangerouslySetInnerHTML={{__html: longContent}}></Modal.Body>
                <Modal.Footer >
                    <Button variant="secondary" onClick={() => setScrollShow(false)} >
                        Close
                    </Button>
                    <Button variant="primary" onClick={() => setScrollShow(false)}>
                        Save Changes
                    </Button>
                </Modal.Footer>
            </Modal>
        </Fragment>
    )
}

Vertically centered

You can vertically center a modal by passing the "centered" prop.

Design

Code

const Modals = () => {      
    function MyVerticallyCenteredModal(props) {
        return (
          <Modal
            {...props}            
            aria-labelledby="contained-modal-title-vcenter"
            centered
          >
            <Modal.Header closeButton>
              <Modal.Title id="contained-modal-title-vcenter">
                Modal title
              </Modal.Title>
            </Modal.Header>
            <Modal.Body>
                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.
            </Modal.Body>
            <Modal.Footer>
              <Button onClick={props.onHide}>Close</Button>
            </Modal.Footer>
          </Modal>
        );
    }

    const [modalShow, setModalShow] = React.useState(false);

    return (
        <Fragment> 
            <Button variant="primary" onClick={() => setModalShow(true)}>
                Launch demo modal 
            </Button>
            <MyVerticallyCenteredModal show={modalShow} onHide={() => setModalShow(false)} />
        </Fragment>
    )
}

Optional sizes

You can specify a bootstrap large or small modal by using the "size" prop.

Design

Code

const Modals = () => {          

    const [smShow, setSmShow] = useState(false);
    const [mdShow, setMdShow] = useState(false);
    const [lgShow, setLgShow] = useState(false);

    return (
        <Fragment> 
            <Button onClick={() => setLgShow(true)}>Extra large modal</Button>{' '}
            <Button onClick={() => setMdShow(true)}>Large modal</Button>{' '}
            <Button onClick={() => setSmShow(true)}>Small modal</Button>
            <Modal size="sm" show={smShow} onHide={() => setSmShow(false)} aria-labelledby="example-modal-sizes-title-sm" >
                <Modal.Header closeButton>
                    <Modal.Title id="example-modal-sizes-title-sm">
                        Small modal
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>...</Modal.Body>
            </Modal>
            <Modal size="lg" show={lgShow} onHide={() => setLgShow(false)} aria-labelledby="example-modal-sizes-title-lg" >
                <Modal.Header closeButton>
                    <Modal.Title id="example-modal-sizes-title-lg">
                        Extra large modal
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>...</Modal.Body>
            </Modal>
            <Modal show={mdShow} onHide={() => setMdShow(false)} aria-labelledby="example-modal-sizes-title-lg" >
                <Modal.Header closeButton>
                    <Modal.Title id="example-modal-sizes-title-lg">
                        Large modal
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>...</Modal.Body>
            </Modal>
        </Fragment>
    )
}

Unlimited Access

Modal

Modal components

Live Demo

Scrolling long content

Vertically centered

Optional sizes