How to Use Bootstrap Modal Popup in ReactJS Using React-Bootstrap?

As you know bootstrap is a CSS framework to design the layouts of websites or web applications. It has many features like a navbar, cards, buttons, accordion, badges, breadcrumb, carousel, modal, etc. You can easily copy the bootstrap code and paste it into your code. But make sure you have embedded the required CDN libraries for this.

So in this tutorial, we will learn how to use the bootstrap modal component in reactjs to make a popup with the help of the react-bootstrap package.

Bootstrap modals place a transparent or darkened background by default over all elements behind the modal popup. You can set up the position of modal with special classes and you can also use your own custom CSS.

So when you are making a react web application then you may want to use the bootstrap library, so you can easily use it. You can also use the direct bootstrap CDN links in the index.html file in the /public folder but in this tutorial, we will work with a react-bootstrap package and use it to make a popup modal in reactjs application.

So, let’s start making a bootstrap popup modal in react application using the react-bootstrap package. But before starting, make sure you have successfully installed and set up the react application, you can check the beginner’s guide for installing react application.

Table of Contents

1 Create a React Bootstrap Modal

1.1 React Bootstrap Small Popup Modal

1.2 React Bootstrap Large Popup Modal

1.3 React Bootstrap Vertically Align Popup Modal

Create a React Bootstrap Modal

Let’s create a new component in the /src folder as PostInfo.js, you can take any name. Add the following structure code of react function component.

import React, {useState} from "react";

function PostInfo() {
    const [show, setShow] = useState(False);
    const handleClose = () => setShow(False);
    const handleShow = () => setShow(True);
    return (
        <>

        </>
    );
}

export default PostInfo;

Now, we will install the bootstrap and react-bootstrap packages to use it to make a popup modal in reactjs component. So use the following command to install both packages.

npm install react-bootstrap bootstrap

Now we have to import these packages in our file where we want to create the bootstrap modal. You have to import the bootstrap.min.css file and the modal component of a react-bootstrap package.

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


function PostInfo() {
    const [show, setShow] = useState(False);
    const handleClose = () => setShow(False);
    const handleShow = () => setShow(True);
    return (
        <>
            <Button className="btn-modal" onClick={handleShow}>
                Open Modal
            </Button>

            <Modal show={show} onHide={handleClose}>

                <Modal.Header closeButton>
                    <Modal.Title>Modal heading</Modal.Title>
                </Modal.Header>

                <Modal.Body>
                    This is the body of the modal.
                </Modal.Body>

                <Modal.Footer>
                    <Button variant="secondary" onClick={handleClose}>
                        Close
                    </Button>
                    <Button variant="primary" onClick={handleClose}>
                        Submit
                    </Button>
                </Modal.Footer>

            </Modal>
        </>
    );
}

export default PostInfo;

In the above code, you can see we imported the bootstrap and react-bootstrap package to make a popup modal. We also imported the <Modal> and <Button> components of react-bootstrap. There are more components of this package you can check here.

But for this tutorial, we only used <Modal> and <Button> components. The <Modal> component have header, title, body and footer section as <Modal.Header>, <Modal.Title>, <Modal.Body>, and <Modal.Footer>. So we used theme accordingly, these also have further attributes that you can use them as per your requirements.

So how it basically works???

It is very simple to understand how it works. So firstly you can see it we have imported the useState react hook to update the state when action trigger.

Then we have to arrow functions handleClose() and handleShow() to handle the state of modal open and close trigger. You can see we have trigger these functions onclick events of modal open and close button.

When you click on the “Open Modal” button then handleShow() function will trigger and it will update the setShow state as true. And modal will popup to you.

And when you click on the “Close” and “Submit” button then handleClose() function will trigger and it will update the setShow state as false and close the popup modal.

You can make any action and trigger an event based on your action. So that’s how it actually works.

There is more customization that you can implement on your bootstrap modal. Customizations like you want the popup modal small, big large size, or vertically aligned. We will see an example of these customizations.

React Bootstrap Small Popup Modal

Let’s suppose you want a small popup modal, so you just have to make small changes in your <Modal> component. You need to add a size attribute as a bootstrap “sm” break-point class.

See the following code as a reference.

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


function PostInfo() {
    const [show, setShow] = useState(False);
    const handleClose = () => setShow(False);
    const handleShow = () => setShow(True);
    return (
        <>
            <Button className="btn-modal" 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>
                    This is the body of the modal.
                </Modal.Body>

                <Modal.Footer>
                    <Button variant="secondary" onClick={handleClose}>
                        Close
                    </Button>
                    <Button variant="primary" onClick={handleClose}>
                        Submit
                    </Button>
                </Modal.Footer>

            </Modal>
        </>
    );
}

export default PostInfo;

React Bootstrap Large Popup Modal

Now, if you want a big large popup modal as per requirements then same as above example, you just have to add the bootstrap “lg” class of size attribute in <Modal> component section.

See the following code as a reference.

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


function PostInfo() {
    const [show, setShow] = useState(False);
    const handleClose = () => setShow(False);
    const handleShow = () => setShow(True);
    return (
        <>
            <Button className="btn-modal" 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>
                    This is the body of the modal.
                </Modal.Body>

                <Modal.Footer>
                    <Button variant="secondary" onClick={handleClose}>
                        Close
                    </Button>
                    <Button variant="primary" onClick={handleClose}>
                        Submit
                    </Button>
                </Modal.Footer>

            </Modal>
        </>
    );
}

export default PostInfo;

React Bootstrap Vertically Align Popup Modal

As you know the default bootstrap modal position is at the top. So let’s suppose you want it to vertically center align. For this, you just need to add the centered attribute in <Modal> component section without any value.

You can see the following code as a reference example.

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


function PostInfo() {
    const [show, setShow] = useState(False);
    const handleClose = () => setShow(False);
    const handleShow = () => setShow(True);
    return (
        <>
            <Button className="btn-modal" onClick={handleShow}>
                Open Modal
            </Button>

            <Modal show={show} onHide={handleClose} centered>

                <Modal.Header closeButton>
                    <Modal.Title>Modal heading</Modal.Title>
                </Modal.Header>

                <Modal.Body>
                    This is the body of the modal.
                </Modal.Body>

                <Modal.Footer>
                    <Button variant="secondary" onClick={handleClose}>
                        Close
                    </Button>
                    <Button variant="primary" onClick={handleClose}>
                        Submit
                    </Button>
                </Modal.Footer>

            </Modal>
        </>
    );
}

export default PostInfo;

So these are examples of the react-bootstrap modal.

So you learned about how to use bootstrap and create a popup modal in reactjs component using the react-bootstrap package. If you like it please share it with your friends on social media and if you have queries please ask me in the comment section, I’ll help you with that.

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

About Aman Mehra

Leave a Comment Cancel reply

Create a React Bootstrap Modal

So how it basically works???

React Bootstrap Small Popup Modal

React Bootstrap Large Popup Modal

React Bootstrap Vertically Align Popup Modal

Related Posts

How to Check if Element Exists Using jQuery?

Top 100+ React JS Interview Questions And Answers

How to Print a Page using jQuery?

How to Bind Dynamically Added Elements with jQuery?

When to Use Traits in PHP – A Comprehensive Guide

Can PHP be used for Mobile Applications Development?

About Aman Mehra

Leave a Comment Cancel reply