Bootstrap Modal

The Modal is a dialog box/popup window which can be used for lightboxes, user notifications, UI enhancements, e-commerce components and many other cases.

It's easily customized. You can manipulate size, position, and content.


Basic example

Below is a most basic Modal example with a button triggering Modal.

Click the button to trigger Modal.

                                
import React from 'react';
import { Container, Button, Modal, ModalBody, ModalHeader, ModalFooter } from 'mdbreact';


class ModalPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false
    };

    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    this.setState({
      modal: !this.state.modal
    });
  }

  render() {
    return (
      <Container>
        <Button color="danger" onClick={this.toggle}>Modal</Button>
        <Modal isOpen={this.state.modal} toggle={this.toggle}>
          <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
          <ModalBody>
            (...)
          </ModalBody>
          <ModalFooter>
            <Button color="secondary" onClick={this.toggle}>Close</Button>{' '}
            <Button color="primary">Save changes</Button>
          </ModalFooter>
        </Modal>
      </Container>
    );
  }
}

export default ModalPage;
                                
                            

Position & Sizes

Click buttons below to launch modals demo

Frame Modal
MDB graphics
Position
Top
Bottom
Central Modal
MDB graphics
Size



Fluid Modal
MDB graphics
Position




Position and size

To change the position or size of the modal add one of the following props to the modal component.

Central modal

Note: Medium size is a default value, so there isn't a dedicated prop for it.

size="sm" Small Modal

size="lg" Large Modal

size="fluid" Full Width Modal

Code example:

                                          
<!-- Medium Modal -->
<Button color="primary" onClick={this.toggle2} >Medium modal</Button>
<Modal isOpen={this.state.modal2} toggle={this.toggle2}>
  <ModalHeader toggle={this.toggle2}>Modal title</ModalHeader>
  <ModalBody>
    (...)
  </ModalBody>
  <ModalFooter>
    <Button color="secondary" onClick={this.toggle2}>Close</Button>{' '}
    <Button color="primary">Save changes</Button>
  </ModalFooter>
</Modal>

<!-- Small Modal -->
<Button color="primary" onClick={this.toggle3} >Small modal</Button>
<Modal isOpen={this.state.modal3} toggle={this.toggle3} size="sm">
  <ModalHeader toggle={this.toggle3}>Modal title</ModalHeader>
  <ModalBody>
    (...)
  </ModalBody>
  <ModalFooter>
    <Button color="secondary" size="sm" onClick={this.toggle3}>Close</Button>{' '}
    <Button color="primary" size="sm">Save changes</Button>
  </ModalFooter>
</Modal>

<!-- Large Modal -->
<Button color="primary" onClick={this.toggle4} >Large modal</Button>
<Modal isOpen={this.state.modal4} toggle={this.toggle4} size="lg">
  <ModalHeader toggle={this.toggle4}>Modal title</ModalHeader>
  <ModalBody>
    (...)
  </ModalBody>
  <ModalFooter>
    <Button color="secondary" onClick={this.toggle4}>Close</Button>{' '}
    <Button color="primary">Save changes</Button>
  </ModalFooter>
</Modal>

<!-- Fluid Modal -->
<Button color="primary" onClick={this.toggle5}>Fluid modal</Button>
<Modal isOpen={this.state.modal5} toggle={this.toggle5} size="fluid">
  <ModalHeader toggle={this.toggle5}>Modal title</ModalHeader>
  <ModalBody>
    (...)
  </ModalBody>
  <ModalFooter>
    <Button color="secondary" onClick={this.toggle5}>Close</Button>{' '}
    <Button color="primary">Save changes</Button>
  </ModalFooter>
</Modal>
                                          
                                      

Side modal

Note: To make it works properly, apart from adding a prop for a position, you also need to add special prop side to modal component.

Note 2: If you want to change modal position, add prop position equal top, right, bottom or left to the modal component.

side + position="top-right" Top Right

side + position="top-left" Top Left

side + position="bottom-right" Bottom Right

side + position="bottom-left" Bottom Left

Code example:

                                          
<!-- Side Modal Top Right -->
<Button color="secondary" onClick={this.toggle6}>Top right</Button>
<Modal isOpen={this.state.modal6} toggle={this.toggle6} side position="top-right">
  <ModalHeader toggle={this.toggle6}>Modal title</ModalHeader>
  <ModalBody>
    (...)
  </ModalBody>
  <ModalFooter>
    <Button color="secondary" onClick={this.toggle6}>Close</Button>{' '}
    <Button color="primary">Save changes</Button>
  </ModalFooter>
</Modal>

<!-- Side Modal Bottom Left -->
<Button color="secondary" onClick={this.toggle7}>Bottom left</Button>
<Modal isOpen={this.state.modal7} toggle={this.toggle7} side position="bottom-left">
  <ModalHeader toggle={this.toggle7}>Modal title</ModalHeader>
  <ModalBody>
    (...)
  </ModalBody>
  <ModalFooter>
    <Button color="secondary" onClick={this.toggle7}>Close</Button>{' '}
    <Button color="primary">Save changes</Button>
  </ModalFooter>
</Modal>
                                          
                                      

Fluid modal

Note: As in the previous example - to make it works properly, apart from adding a prop for a position, you also need to add special prop fullHeight to modal component.

Note 2: If you want to change modal position, add prop position equal top, right, bottom or left to the modal component.

fullHeight + position="right" Right

fullHeight + position="left" Left

fullHeight + position="bottom" Bottom

fullHeight + position="top" Top

Code example:

                                          
<!-- Full Height Modal Right -->
<Button color="info" onClick={this.toggle8}>Right</Button>
<Modal isOpen={this.state.modal8} toggle={this.toggle8} fullHeight position="right">
  <ModalHeader toggle={this.toggle8}>Modal title</ModalHeader>
  <ModalBody>
    (...)
  </ModalBody>
  <ModalFooter>
    <Button color="secondary" onClick={this.toggle8}>Close</Button>{' '}
    <Button color="primary">Save changes</Button>
  </ModalFooter>
</Modal>        

<!-- Full Height Modal Bottom -->
<Button color="info" onClick={this.toggle9}>Bottom</Button>
<Modal isOpen={this.state.modal9} toggle={this.toggle9} fullHeight position="bottom">
  <ModalHeader toggle={this.toggle9}>Modal title</ModalHeader>
  <ModalBody>
    (...)
  </ModalBody>
  <ModalFooter>
    <Button color="secondary" onClick={this.toggle9}>Close</Button>{' '}
    <Button color="primary">Save changes</Button>
  </ModalFooter>
</Modal>       
                                          
                                      

Frame modal

Note: As in the previous examples - to make it works properly, apart from adding a prop for a position, you also need to add special prop frame to modal component.

Note 2: If you want to change modal position, add prop position equal top, right, bottom or left to the modal component.

frame + position="bottom" Bottom

frame + position="top" Top

Code example:

                                          
<!-- Frame Modal Bottom -->
<Button color="warning" onClick={this.toggle10}>Bottom</Button>
<Modal isOpen={this.state.modal10} toggle={this.toggle10} frame position="bottom">
  <ModalBody className="text-center">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    <Button color="secondary" onClick={this.toggle10}>Close</Button>{' '}
    <Button color="primary">Save changes</Button>
  </ModalBody>
</Modal> 

<!-- Frame Modal Top -->
<Button color="warning" onClick={this.toggle11}>Top</Button>
<Modal isOpen={this.state.modal11} toggle={this.toggle11} frame position="top">
  <ModalBody className="text-center">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    <Button color="secondary" onClick={this.toggle11}>Close</Button>{' '}
    <Button color="primary">Save changes</Button>
  </ModalBody>
</Modal> 
                                          
                                      

Remove backdrop

To remove backdrop add backdrop={false} prop to the modal markup


<!-- Modal without backdrop -->
<Button onClick={this.toggle12}>Modal</Button>
<Modal isOpen={this.state.modal12} toggle={this.toggle12} backdrop={false}>
  <ModalHeader toggle={this.toggle12}>Modal title</ModalHeader>
  <ModalBody>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </ModalBody>
  <ModalFooter>
    <Button color="secondary" onClick={this.toggle12}>Close</Button>{' '}
    <Button color="primary">Save changes</Button>
  </ModalFooter>
</Modal>   
        

Scrolling long content

When modal become too long for the user’s viewport or device, it scrolls independently of the page itself. Try the demo below.


<Button color="primary" onClick={this.toggle13}>Modal</Button>
<Modal isOpen={this.state.modal13} toggle={this.toggle13}>
  <ModalHeader toggle={this.toggle13}>Modal title</ModalHeader>
  <ModalBody>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
  </ModalBody>
  <ModalFooter>
    <Button color="secondary" onClick={this.toggle13}>Close</Button>{' '}
    <Button color="primary">Save changes</Button>
  </ModalFooter>
</Modal>    
        

Vertically centered

Add centered prop to modal to vertically center the modal.


<Button color="primary" onClick={this.toggle14} >Modal</Button>
<Modal isOpen={this.state.modal14} toggle={this.toggle14} centered>
  <ModalHeader toggle={this.toggle14}>Modal title</ModalHeader>
  <ModalBody>
    (...)
  </ModalBody>
  <ModalFooter>
    <Button color="secondary" onClick={this.toggle14}>Close</Button>{' '}
    <Button color="primary">Save changes</Button>
  </ModalFooter>
</Modal> 
        

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.

Note: Remember to initialize tooltips/popovers. You can find more information in the Tooltips and popovers documentation.


import { Container, Button, Modal, ModalBody, ModalHeader, ModalFooter, Popover, PopoverBody, PopoverHeader, Tooltip } from 'mdbreact';

<Button color="primary" onClick={this.toggle15} >Modal</Button>
<Modal isOpen={this.state.modal15} toggle={this.toggle15}>
  <ModalHeader toggle={this.toggle15}>Modal title</ModalHeader>
  <ModalBody>
    This
    <Popover 
      component="button"
      placement="right" 
      popoverBody="button" 
      tag="span"
      className="btn btn-secondary">
      <PopoverHeader>Popover title</PopoverHeader>
      <PopoverBody>Popover body content is set in this attribute.</PopoverBody>
    </Popover>
    triggers a popover on click.
    <hr />
    <Tooltip
      placement="top"
      tag="a"
      component="span"
      tooltipContent="Tooltip">
        This link
    </Tooltip>
    {' '}and{' '}
    <Tooltip
      placement="top"
      tag="a"
      component="span"
      tooltipContent="Tooltip">
        that link 
    </Tooltip>
    {' '}have tooltips on hover.
  </ModalBody>
  <ModalFooter>
    <Button color="secondary" onClick={this.toggle15}>Close</Button>{' '}
    <Button color="primary">Save changes</Button>
  </ModalFooter>
</Modal> 
          

Using the grid

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


import { Container, Button, Modal, ModalBody, ModalHeader, ModalFooter, Row, Col } from 'mdbreact';

<Button onClick={this.toggle16}>Modal</Button>
<Modal isOpen={this.state.modal16} toggle={this.toggle16}>
  <ModalHeader toggle={this.toggle16}>Modal title</ModalHeader>
  <ModalBody>
    <Container fluid className="text-white">
      <Row>
        <Col md="4" className="bg-info">.col-md-4</Col>
        <Col md="4" className="ml-auto bg-info">.col-md-4 .ml-auto</Col>
      </Row>
      <br />
      <Row>
        <Col md="3" className="ml-auto bg-info">.col-md-3 .ml-auto</Col>
        <Col md="2" className="ml-auto bg-info">.col-md-2 .ml-auto</Col>
      </Row>
      <Row>
        <Col md="6" className="ml-5 bg-info">.col-md-6 .ml-5</Col>
      </Row>
      <br />
      <Row>
        <Col sm="9" className="bg-info">
          Level 1: .col-sm-9
          <Row>
            <Col sm="6" className="bg-info">
              Level 2: .col-8 .col-sm-6
            </Col>
            <Col sm="6" className="bg-info">
              Level 2: .col-4 .col-sm-6
            </Col>
          </Row>
        </Col>
      </Row>
    </Container>
  </ModalBody>
  <ModalFooter>
    <Button color="secondary" onClick={this.toggle16}>Close</Button>{' '}
    <Button color="primary">Save changes</Button>
  </ModalFooter>
</Modal>  
          

Varying modal content

                                          
import React from 'react';
import { Container, Button, Modal, ModalBody, ModalHeader, ModalFooter, Input } from 'mdbreact';


class ModalPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false,
      mailAddress: '@mdo'
    };

    this.toggle = this.toggle.bind(this); 
  }

  toggle() {
    this.setState({
      modal: !this.state.modal
    });
  }
  
  render() {
    return (
      <Container>
        <Button color="primary" onClick={this.toggle} >Open modal for {this.state.mailAddress}</Button>
        <Modal isOpen={this.state.modal} toggle={this.toggle}>
          <ModalHeader toggle={this.toggle}>New message to {this.state.mailAddress}</ModalHeader>
          <ModalBody>
            <div className="md-form">
              <Input defaultValue={this.state.mailAddress} />
              <Input type="textarea" label="Message" rows="2" />
            </div>
          </ModalBody>
          <ModalFooter>
            <Button color="secondary" onClick={this.toggle}>Close</Button>{' '}
            <Button color="primary">Send message</Button>
          </ModalFooter>
        </Modal>
      </Container>
    );
  }
}

export default ModalPage;                                          
                                      

Remove animation

For modals that simply appear rather than fade into view, add fade={false} prop to your modal markup.

              
<Button color="danger" onClick={this.toggle} >Modal</Button>
<Modal fade={false} isOpen={this.state.modal} toggle={this.toggle}>
  <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
  <ModalBody>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </ModalBody>
  <ModalFooter>
    <Button color="secondary" onClick={this.toggle}>Close</Button>{' '}
    <Button color="primary">Save changes</Button>
  </ModalFooter>
</Modal>