React Bootstrap — Modals and Navbars

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 and navs to a React app with React Bootstrap.

Modal Sizes

We can change the size of the modal with the size 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 size="sm" 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.
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={onClose}>
            Close
          </Button>
          <Button variant="primary">Understood</Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

to make the modal small.

To make them large, we can set the size prop to lg .

Sizing Modals using Custom CSS

We can set the size of a modal using custom CSS.

To do that we can add the dialogClassName prop to the modal.

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
        dialogClassName="modal-90w"
        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.
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={onClose}>
            Close
          </Button>
          <Button variant="primary">Understood</Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

We set the dialogClassName to a class name, and then we can add our own CSS rules for the class name if we want.

Navigation

To add navigation to our React app, we can use the Nav component.

For example, we can write:

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

export default function App() {
  return (
    <>
      <Nav
        activeKey="/home"
        onSelect={selectedKey => alert(`selected ${selectedKey}`)}
      >
        <Nav.Item>
          <Nav.Link href="/home">active</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="foo">foo</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="bar">bar</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="disabled" disabled>
            disabled
          </Nav.Link>
        </Nav.Item>
      </Nav>
    </>
  );
}

We have the Nav component with the activeKey prop.

This sets the href of the active link.

eventKey is a unique key for each nav item.

Inside it, we have the Nav.Item components to add the nav items.

href has the path that the link goes to.

We can also render the nav component as ul elements.

For example, we can write:

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

export default function App() {
  return (
    <>
      <Nav defaultActiveKey="/home" as="ul">
        <Nav.Item as="li">
          <Nav.Link href="/home">home</Nav.Link>
        </Nav.Item>
        <Nav.Item as="li">
          <Nav.Link eventKey="foo">foo</Nav.Link>
        </Nav.Item>
        <Nav.Item as="li">
          <Nav.Link eventKey="bar">bar</Nav.Link>
        </Nav.Item>
      </Nav>
    </>
  );
}

to display our nav as a ul.

We did that with the as prop.

The Nav has as set to ul and Nav.Item s have as set to li .

Conclusion

We can size models with classes or the size prop.

Also, we can add a navs with React Boostrap.