React Bootstrap — Modal Customizations

React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to add modals to a React app with React Bootstrap.

Modals Without Animation

We can disable animations on a modal if we set the animation prop to false .

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Modal from "react-bootstrap/Modal";
import Button from "react-bootstrap/Button";

export default function App() {
  const [show, setShow] = React.useState(false);

const onClose = () => setShow(false);
  const onClick = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={onClick}>
        open modal
      </Button>

      <Modal
        animation={false}
        show={show}
        onHide={onClose}
        backdrop="static"
        keyboard={false}
      >
        <Modal.Header closeButton>
          <Modal.Title>Modal title</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
          efficitur massa tellus, non ultrices augue sagittis ornare. Sed
          ultrices ligula in est tempus tincidunt. Nam id consequat lacus, et
          mattis turpis. Sed velit nibh, tincidunt in ante a, accumsan fringilla
          odio. Etiam fermentum euismod enim id faucibus. Etiam facilisis nulla
          id leo imperdiet aliquet. In dignissim nulla non magna commodo
          ullamcorper. Fusce non ligula id tellus dapibus tempor sit amet in
          libero. Proin malesuada vulputate augue in bibendum. In mollis felis
          eu ante pharetra, ut vehicula sapien malesuada. Nulla imperdiet, urna
          a laoreet ullamcorper, massa nunc posuere neque, iaculis egestas urna
          arcu a metus. escape key.
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={onClose}>
            Close
          </Button>
          <Button variant="primary">Understood</Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

We have the animation prop set to false so that we won’t see any animation when we open or close the modal.

We have the open modal button to set the show state to true to open the modal.

And we have the onHide prop set to the onClose button to make it close when we click the close button.

keyboard set to false disables the closing with the Esc key.

Vertically Centered

We can make the modal vertically centered.

To do that, we just add the centered prop.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Modal from "react-bootstrap/Modal";
import Button from "react-bootstrap/Button";

export default function App() {
  const [show, setShow] = React.useState(false);

const onClose = () => setShow(false);
  const onClick = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={onClick}>
        open modal
      </Button>

      <Modal centered show={show} onHide={onClose} keyboard={false}>
        <Modal.Header closeButton>
          <Modal.Title>Modal title</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
          efficitur massa tellus, non ultrices augue sagittis ornare. Sed
          ultrices ligula in est tempus tincidunt. Nam id consequat lacus, et
          mattis turpis. Sed velit nibh, tincidunt in ante a, accumsan fringilla
          odio. Etiam fermentum euismod enim id faucibus. Etiam facilisis nulla
          id leo imperdiet aliquet. In dignissim nulla non magna commodo
          ullamcorper. Fusce non ligula id tellus dapibus tempor sit amet in
          libero. Proin malesuada vulputate augue in bibendum. In mollis felis
          eu ante pharetra, ut vehicula sapien malesuada. Nulla imperdiet, urna
          a laoreet ullamcorper, massa nunc posuere neque, iaculis egestas urna
          arcu a metus. escape key.
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={onClose}>
            Close
          </Button>
          <Button variant="primary">Understood</Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

With the centered prop on the Modal , the modal will be vertically centered.

Using the Grid

We can use the layout grid in the modal.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Modal from "react-bootstrap/Modal";
import Button from "react-bootstrap/Button";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Container from "react-bootstrap/Container";

export default function App() {
  const [show, setShow] = React.useState(false);

const onClose = () => setShow(false);
  const onClick = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={onClick}>
        open modal
      </Button>

      <Modal centered show={show} onHide={onClose} keyboard={false}>
        <Modal.Header closeButton>
          <Modal.Title>Modal title</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Container>
            <Row>
              <Col xs={12} md={6}>
                foo
              </Col>
              <Col xs={12} md={6}>
                bar
              </Col>
            </Row>

            <Row>
              <Col xs={6} md={8}>
                foo
              </Col>
              <Col xs={6} md={4}>
                bar
              </Col>
            </Row>
          </Container>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={onClose}>
            Close
          </Button>
          <Button variant="primary">Understood</Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

We have a Container component with Row and Col to display the layout our way.

As with any other content, we can set the width according to the breakpoints as we did in the Col s.

We set the column size from 1 to 12, which is narrowest to widest respectively.

Conclusion

We can disable animation in modals.

Also, we can make them vertically centered.

Layout grids can also be inside modals.