How to Make A React Bootstrap Modal

June 30, 2021, 8:02 p.m.
Bootstrap React · 5 min read
How to Make A React Bootstrap Modal
Last Modified: July 2, 2021, 9:31 a.m.

A Bootstrap modal is a component that's positioned over everything else in the HTML document. Bootstrap modals by default place a transparent, darkened background over all elements behind the modal.

React is an open-source JavaScript library for user interface components. When combined, React and Bootstrap modals can quickly create a clean UI experience for edit forms, extra information, and confirmations. 

 

Create your React App

Facebook's create-react-app

C:\Users\Owner\desktop\react> npx create-react-app react-bootstrap

Create a React app from Facebook's create-react-app repo. It has Bable and webpack already configured. 

You'll want to refer to the React beginner's guide if you're new to this. 

 

Install React-Bootstrap

Windows Command Prompt

C:\Users\Owner\desktop\react> cd react-bootstrap
C:\Users\Owner\desktop\react\react-bootstrap> npm install react-bootstrap bootstrap@4.6.0

React-Bootstrap is a package that has all of the Bootstrap components build with React. 

The only component we need for this tutorial is the Bootstrap modal. 

 

Configure your React App

Again, if you're new to React, head over to the beginner's guide for instructions on file configurations. 

 

Create a React Bootstrap Modal

Create an InfoModal.js file and component

react-bootstrap > src > (New Folder) components > (New File) InfoModal.js

import React, {useState} from "react";


export default function InfoModal() {
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
  return (
   
  );
}

The React Bootstrap <Modal> component comes with a <Modal.Header>, <Modal.Title>, <Modal.Body>, and <Modal.Footer> sub-component. 

Import useState Hook from React. We need this React Hook to be able to add a React state to our functional component. 

Previously, states could only be added to class components. 

Next, write your functional component, InfoModal, and declare a new state variable called show

Rather than setting this.state in a constructor, we can call useState Hook directly inside our functional component.

useState returns the current state show and a function setShow that updates the state using the array destructuring JS syntax. 

Now we can declare two handlers, handleClose and handleShow, as constants so they are immutable. Then use arrow functions to bind each function to the component's instance or InfoModal's state. 

That way the handleClose and handleShow functions have access to useState and can update the current state show when called in the modal.

 

Add the React Bootstrap Modal

react-bootstrap > src > components > InfoModal.js

import React, {useState} from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import {Modal, Button} from 'react-bootstrap';


export default function InfoModal() {
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
  return (
    <>
      <Button className="nextButton" onClick={handleShow}>
        Open Modal
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</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>
    </>
  );
}

With the logic complete, now you can pass the constants into the Modal component and call them where appropriate. 

Import the Bootstrap minified CSS in addition to the Button and Modal Component from react-bootstrap

Call handleShow when the "Open Modal" button is clicked, and handleClose when the "Close" or "Save Changes" buttons are clicked. 

 

Customize the React Bootstrap Modal

Vertically Centered React Bootstrap Modal 

react-bootstrap > src > components > InfoModal.js

import React, {useState} from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import {Modal, Button} from 'react-bootstrap';


export default function InfoModal() {
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
  return (
    <>
      <Button className="nextButton" onClick={handleShow}>
        Open Modal
      </Button>

      <Modal show={show} onHide={handleClose} centered>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</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>
    </>
  );
}

Pass in the centered prop in the Modal component to vertically center the modal. 

React Bootstrap modal centered

 

Large React Bootstrap Modal

react-bootstrap > src > components > InfoModal.js

import React, {useState} from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import {Modal, Button} from 'react-bootstrap';


export default function InfoModal() {
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
  return (
    <>
      <Button className="nextButton" onClick={handleShow}>
        Open Modal
      </Button>

      <Modal show={show} onHide={handleClose} size="lg">
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</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>
    </>
  );
}

Pass in the size prop with the lg value to make a large modal. 

React Bootstrap Modal Large

 

Small React Bootstrap Modal

react-bootstrap > src > components > InfoModal.js

import React, {useState} from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import {Modal, Button} from 'react-bootstrap';


export default function InfoModal() {
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
  return (
    <>
      <Button className="nextButton" onClick={handleShow}>
        Open Modal
      </Button>

      <Modal show={show} onHide={handleClose} size="sm">
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</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>
    </>
  );
}

Or pass in the sm value to the size props for a small modal. 

React Bootstrap modal small

 

Static Backdrop React Bootstrap Modal

react-bootstrap > src > components > InfoModal.js

import React, {useState} from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import {Modal, Button} from 'react-bootstrap';


export default function InfoModal() {
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
  return (
    <>
      <Button className="nextButton" onClick={handleShow}>
        Open Modal
      </Button>

      <Modal show={show} onHide={handleClose} backdrop='static' keyboard="false">
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</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>
    </>
  );
}

Set the backdrop props to static and the keyboard props to false to prevent users from closing the modal if they click outside the component or press the escape key. 






Post a Comment
Join the community

0 Comments
2
Jaysha
Written By
Jaysha
Hello! I enjoy learning about new CSS frameworks, animation libraries, and SEO.