Working with Bootstrap's Modals in React (2023)


  • Introduction
  • Installing React-Bootstrap
  • Hiding/Showing a Modal
  • Modal Events
  • Customizing the Modal
  • Conclusion
  • Top


Modals are very common in front-end applications. React-bootstrap has rebuilt the jQuery-based modal with React components that provide the same functionality as the jQuery counter-parts. In this guide I will show you how to install react-bootstrap, show and hide a modal, work with different modal events, and customize the modal to your needs using Bootstrap Modals in React. Let's get started.

Installing React-Bootstrap

To get started with using Bootstrap in your React application, you need to install the react-bootstrap package from npm along with the bootstrap v4 package. You will need to install regular Bootstrap for the CSS.

1yarn add react-bootstrap bootstrap2# or3npm i react-bootstrap bootstrap


After the installation is complete, you can import the modal component and the styling into your module.

1import Modal from "react-bootstrap/Modal";2import "bootstrap/dist/css/bootstrap.min.css";


A modal has a few basic sections: the Header, the Title, the Body, and the Footer. These sections will hold the content that we need to display. Here's an example displaying a basic modal using these components.

1import Modal from "react-bootstrap/Modal";2import "bootstrap/dist/css/bootstrap.min.css";34const App = () => {5 return (6 <Modal show={true}>7 <Modal.Header>Hi</Modal.Header>8 <Modal.Body>asdfasdf</Modal.Body>9 <Modal.Footer>This is the footer</Modal.Footer>10 </Modal>11 );12};


Use Modal.<component> syntax to display each component. If you would prefer not to use the object literal syntax when defining you modals, you can import each component separately as well.

1import React from "react";2import ReactDOM from "react-dom";3import Modal from "react-bootstrap/Modal";4import ModalBody from "react-bootstrap/ModalBody";5import ModalHeader from "react-bootstrap/ModalHeader";6import ModalFooter from "react-bootstrap/ModalFooter";7import ModalTitle from "react-bootstrap/ModalTitle";89const App = () => {10 return (11 <Modal show={true}>12 <ModalHeader>13 <ModalTitle>Hi</ModalTitle>14 </ModalHeader>15 <ModalBody>asdfasdf</ModalBody>16 <ModalFooter>This is the footer</ModalFooter>17 </Modal>18 );19};20const rootElement = document.getElementById("root");21ReactDOM.render(<App />, rootElement);


Now that you have a functional modal in your application, let's make the modal interactive.

Hiding/Showing a Modal

Our previous example shows how to display a modal using show property on the modal component. I initially hard-coded the value to true, but it is not very flexible. To improve this, let's set the value to a variable or a toggle-able expression. We will also create a button to toggle the visibility.

1const App = () => {2 const [isOpen, setIsOpen] = React.useState(false);34 const showModal = () => {5 setIsOpen(true);6 };78 const hideModal = () => {9 setIsOpen(false);10 };1112 return (13 <>14 <button onClick={showModal}>Display Modal</button>15 <Modal show={isOpen} onHide={hideModal}>16 <Modal.Header>17 <Modal.Title>Hi</Modal.Title>18 </Modal.Header>19 <Modal.Body>The body</Modal.Body>20 <Modal.Footer>21 <button onClick={hideModal}>Cancel</button>22 <button>Save</button>23 </Modal.Footer>24 </Modal>25 </>26 );27};


I've added a showModal and hideModal method to update a state property called isOpen. Assigning the isOpen variable as the value to the show property means we now have control over whether the modal is showing or not. The new onHide property is necessary if we want to hide the modal when clicking on the non-static backdrop or hitting the esc key. I've also added a couple of buttons to the footer to make this modal more realistic. In addition to hiding the Modal by hitting the "Esc" key or clicking the backdrop, I put the hideModal method on the Cancel button to show a different way of hiding the modal.

Modal Events

The modal comes with some helpful events to assist us with the intermediate states between hiding and showing the modal. For example, if you want to show different content in your modal, on the main page as it's loading into view, or in the process of hiding, then you can utilize the onEnter, onEntered, onExit or onExited callbacks respectively. Let's look at these callbacks individually in greater depth.


The onEntered event takes a callback that will fire once the modal has finished coming into view. This is useful if we want to asynchronously load data into the modal, or interact with elements once they are visible in the modal. In this example, let's update the title of our modal from Transitioning... to Modal Ready.

1const App = () => {2 const [isOpen, setIsOpen] = React.useState(false);3 const [title, setTitle] = React.useState("Transitioning...");45 const showModal = () => {6 setIsOpen(true);7 };89 const hideModal = () => {10 setIsOpen(false);11 setTitle("Transitioning...");12 };1314 const modalLoaded = () => {15 setTitle("Modal Ready");16 };1718 return (19 <>20 <button onClick={showModal}>Display Modal</button>21 <Modal show={isOpen} onHide={hideModal} onEntered={modalLoaded}>22 <Modal.Header>23 <Modal.Title>{title}</Modal.Title>24 </Modal.Header>25 <Modal.Body>The body</Modal.Body>26 <Modal.Footer>27 <button onClick={hideModal}>Cancel</button>28 <button>Save</button>29 </Modal.Footer>30 </Modal>31 </>32 );33};



In this example, we'll start a timer to count how long it takes to open the modal in milliseconds. We'll display in the modal's body how long it takes for the onEnter callback to get the command to start opening the modal to when it finishes opening the modal.

1const App = () => {2 const [isOpen, setIsOpen] = React.useState(false);3 const [timer, setTimer] = React.useState(0);4 const [startTime, setStartTime] = React.useState(0);5 const [endTime, setEndTime] = React.useState(0);67 const showModal = () => {8 setIsOpen(true);9 };1011 const hideModal = () => {12 setIsOpen(false);13 setTitle("Transitioning...");14 };1516 const startTimer = () => {17 setStartTime(;18 };1920 const modalLoaded = () => {21 setEndTime(;22 };2324 return (25 <>26 <button onClick={showModal}>Display Modal</button>27 <Modal28 show={isOpen}29 onHide={hideModal}30 onEnter={startTimer}31 onEntered={modalLoaded}32 >33 <Modal.Header>34 <Modal.Title>{title}</Modal.Title>35 </Modal.Header>36 <Modal.Body>{endTime - startTime} ms</Modal.Body>37 <Modal.Footer>38 <button onClick={hideModal}>Cancel</button>39 <button>Save</button>40 </Modal.Footer>41 </Modal>42 </>43 );44};


onExit and onExited

We can similarly utilize the onExit and onExited callbacks to handle page interactions during the transition. Let's show a 'goodbye' message when the user closes the modal. We'll also change the page background when the modal is finished exiting.

1const App = () => {2 const [isOpen, setIsOpen] = React.useState(false);3 const [timer, setTimer] = React.useState(0);4 const [startTime, setStartTime] = React.useState(0);5 const [endTime, setEndTime] = React.useState(0);67 const showModal = () => {8 setIsOpen(true);9 setTitle("Modal Ready");10 = "white";11 };1213 const hideModal = () => {14 setIsOpen(false);15 };1617 const startTimer = () => {18 setStartTime(;19 };2021 const modalLoaded = () => {22 setEndTime(;23 };2425 const onExit = () => {26 setTitle("Goodbye 😀");27 };2829 const onExited = () => {30 = "green";31 };3233 return (34 <>35 <button onClick={showModal}>Display Modal</button>36 <Modal37 show={isOpen}38 onHide={hideModal}39 onEnter={startTimer}40 onEntered={modalLoaded}41 onExit={onExit}42 onExited={onExited}43 >44 <Modal.Header>45 <Modal.Title>{title}</Modal.Title>46 </Modal.Header>47 <Modal.Body>{endTime - startTime} ms</Modal.Body>48 <Modal.Footer>49 <button onClick={hideModal}>Cancel</button>50 <button>Save</button>51 </Modal.Footer>52 </Modal>53 </>54 );55};


Customizing the Modal

Making the modal match your brand and design is simple. Use the same methods available for any react component to style a modal, including any CSS-in-js solution, standard CSS, and CSS Modules. If you need to add a class to the modal dialog, use the dialogClassName property.

1const App = () => {2 return (3 <Modal show={true} dialogClassName={"primaryModal"}>4 <ModalHeader>5 <ModalTitle>Hi</ModalTitle>6 </ModalHeader>7 <ModalBody>asdfasdf</ModalBody>8 <ModalFooter>This is the footer</ModalFooter>9 </Modal>10 );11};


In the above example, the .primaryModal class will be added to the modal dialog div.

as property

The default HTML element for a modal component container is the div element. If you do not want to use the div default, you can specify a different element with the as property. This works for not just the modal dialog, but also for the header, title, body, and footer.

1const App = () => {2 return (3 <Modal show={true} as="section">4 <ModalHeader as="span">5 <ModalTitle as="h4">Hi</ModalTitle>6 </ModalHeader>7 <ModalBody as="section">asdfasdf</ModalBody>8 <ModalFooter as="footer">This is the footer</ModalFooter>9 </Modal>10 );11};



The size property on the <Modal> component can be used to set the width of the modal to the defaults defined in the bootstrap CSS. There are three options: sm, lg, xl. If you want to define your own custom class to set the width, you can do that as well.

1const App = () => {2 return (3 <Modal show={true} size="lg">4 <ModalHeader>5 <ModalTitle>Hi</ModalTitle>6 </ModalHeader>7 <ModalBody>asdfasdf</ModalBody>8 <ModalFooter>This is the footer</ModalFooter>9 </Modal>10 );11};



Working with the react-bootstrap component library allows you the benefits of Bootstrap and React in one tool. And, if you already know how to use React components and properties, then you immediately start working with Bootstrap. After reading this guide, you should be able to:

  • add react-bootstrap and bootstrap to your project
  • show and hide a modal
  • work with built-in modal events
  • and customize the modal to fit your brand.

Please keep an eye out for more guides, where I will show you how to use bootstrap components within a react application. Thanks for reading 😃

For more details about styling react components, check out the course Styling React Components by Jake Trent.This guide will introduce you to react-bootstrap.


Does Bootstrap work well with React? ›

Using the React-Bootstrap integration saves you time because the JavaScript elements are already there, wrapped in neat little React-shaped bows. If you opt to use Bootstrap as/is, you should be well-versed in JavaScript and JavaScript plug-ins, because you'll need to work with those components on your own.

How do I use Bootstrap modals in React? ›

How to Create Modal Component in React using Bootstrap
  1. Step 1: Generate React App.
  2. Step 2: Make Component File.
  3. Step 3: Install Bootstrap Modules.
  4. Step 4: Create Modal Component.
  5. Step 5: Update App.js File.
  6. Step 6: Serve React Application.
Apr 24, 2023

What is the best way to create modal with React? ›

In the custom styles, we can modify how our Modal looks. For example, we can change the background color of our Modal. To integrate Modal into our React application, we create a useState value and attach it to our Modal. So, when we click on the button, the Boolean value will toggle and the Modal will appear/disappear.

How do I get Bootstrap modal to work? ›

To trigger the modal window, you need to use a button or a link. Then include the two data-* attributes: data-toggle="modal" opens the modal window. data-target="#myModal" points to the id of the modal.

Why Bootstrap is not working properly in React js? ›

The reason is that Bootstrap relies on jQuery to run particular user interface components. And jQuery manipulates the DOM directly, which contradicts the declarative approach of React.

Can React replace Bootstrap? ›

Bootstrap and React frameworks are high in demand and close competitors when designing and customizing the best UI for web applications. React is a component-based framework, whereas Bootstrap is a template-based front-end framework that provides ready-made templates for building applications.

Can we use Bootstrap modal in react JS? ›

We can use the following approach in ReactJS to use the react-bootstrap Modal Component. Modal Props: animation: It is used to add a fade animation when Modal is open and closed.

When to use Bootstrap modal? ›

The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds .modal-open to the <body> to override default scrolling behavior and generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal.

How do modals work in React? ›

A modal is a message box that is displayed on top of your screen. Modals put an overlay on the screen; therefore, they take visual precedence over all the other elements.

How do you make a reusable modal in React? ›

Refer to the article Building a modal with Reactjs portal to learn more about React Portals.
  1. Create a page overlay. Edit the index. ...
  2. Create a Modal component. Now it's time to create the Modal component. ...
  3. Create a component to show the Modal in the overlay. Now I have the overlay and the Modal.
Sep 15, 2022

How do I create a custom modal in Reactjs? ›

Let's create a Basic Modal component
  1. <div className="App"> <button> Modal </button> </div>
  2. import { useState } from "react"; import "./App. ...
  3. const Modal = () => { return ( <div> Modal </div> ); }; export default Modal;
  4. <div id="modal" /> <div id="root" />
Jun 10, 2021

What makes a good modal? ›

Ideally, you should put a sentence or two sentences in your modal windows. Modal should not include more than two actions. A third action, such as “Learn more” which is typically used to navigate users away from the dialog, increases the risk of leaving the task unfinished.

Is it difficult to learn Bootstrap? ›

Ease of Use. First and foremost, Bootstrap is easy to learn. Due to its popularity, plenty of tutorials and online forums are available to help you get started. One of the reasons why Bootstrap is so popular among web developers and web designers is that it has a simple file structure.

How to show Bootstrap modal using js? ›

Bootstrap JS Modal
  1. JS Modal (modal. js) ...
  2. The Modal Plugin Classes. Class. ...
  3. Trigger the Modal Via data-* Attributes. Add data-toggle="modal" and data-target="#modalID" to any element. ...
  4. Trigger Via JavaScript. Enable manually with: ...
  5. Modal Options. ...
  6. Modal Methods. ...
  7. Modal Events. ...
  8. More Examples.

How to make React app responsive using Bootstrap? ›

If you use Package Manager to add react-bootstrap, make sure you use an import statement to add a stylesheet. If you use CDN in the first step, then use CDN for adding a stylesheet. import { Alert } from 'react-bootstrap';

What is the problem with Bootstrap? ›

Bootstrap is for non-designers or those who do not know CSS. This is one of the biggest mistakes that developers make when they start using Bootstrap for their project. If you do not do CSS, you will not be able to utilize what Bootstrap has to offer fully.

How to check if Bootstrap is working? ›

We can check Bootstrap-specific method is available or not. Syntax: var bootstrap = (typeof $(). "Bootstrap-specific method" == 'function');

Do people still use Bootstrap? ›

Bootstrap is one of the longest-running CSS frameworks still in use; it was created and open-sourced in 2011 by Twitter. One of its biggest draws is that it provides CSS-based templates and classes for common components that put responsiveness and mobile-first design at the forefront.

What is replacing React? ›

The Bottom Line: Will Next.js Replace React.

What will replace Bootstrap? ›

Best Bootstrap Alternatives
  • Foundation. The most advanced responsive front-end framework in the world. ...
  • Bulma. Bulma is is a CSS framework heavily inspired by Bootstrap and based on the modern Flexible Box Module, usually referred to as flexbox. ...
  • Tailwind CSS. ...
  • HTML5 Boilerplate. ...
  • Material UI. ...
  • Metro UI. ...
  • UIKit. ...
  • Materialize.
Feb 11, 2020

Does Bootstrap modal need JavaScript? ›

You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first-class API and should be your first consideration when using a plugin.

Does React have modals? ›

We maintain that accessibility is a key component of any modern web application. As such, we have created this modal in such a way that it fulfills the accessibility requirements of the modern web.

Can I use Bootstrap with material UI in React? ›

Can We Use Bootstrap and Material Together? Yes, it's possible to work with Bootstrap and Material Design simultaneously. These two design systems have their differences, but they also have a lot in common, and you can use one to compliment the other.

When should you not use bootstrapping? ›

Bootstrap is powerful, but it's not magic — it can only work with the information available in the original sample. If the samples are not representative of the whole population, then bootstrap will not be very accurate.

Should I use modal or new page? ›

If the information or transition is temporary and the focus of the user is to be returned to the page after they have assimilated the information or interacted with a small form and the focus won't change, then a modal form is the right way to go.

Should we use Bootstrap or not? ›

Bootstrap enables designers and developers to build completely responsive websites quickly. It can be considered the most popular CSS framework for developing responsive and Mobile-First applications.

How to make React bootstrap work? ›

Install React Bootstrap package (such as bootstrap-react or reactstrap).
  1. Using Bootstrap CDN. This is one of the easiest ways to use bootstrap in your React app. ...
  2. Import Bootstrap as a Dependency. ...
  3. Install React Bootstrap Package.
Apr 12, 2023

How do I open modal automatically in React? ›

Set up the Modal Component
  1. Inside the App component, add a button that will open up the modal.
  2. In the handleShow() function, set a Boolean state value to true and use it to display or trigger the modal.
  3. Now, add the Modal component after the button.
May 18, 2020

How do you use multiple modals in React? ›

React multi modal library
  1. NPM. $ npm install react-multi-modal.
  2. Yarn. $ yarn add react-multi-modal. ...
  3. ModalRoot component. The ModalRoot component will render any component you pass in the showModal method and it acts like a placeholder. ...
  4. Provider component. ...
  5. Context object. ...
  6. Using a Context.Consumer. ...
  7. Using useContext hook.
Mar 30, 2020

How do you use multiple modals in react JS? ›

There are ways to avoid these repetitions. To name a few, you could use context, event emitters or state app management libraries like Redux. This article is going to show you how you can achieve this using context, which is built into React so no need to import other libraries.

How do you make reusable UI components in React? ›

So, to create a re-usable component in React, all you need to do is create a function that has a capital letter as its first character. This function should receive props as an argument and you can use these props in whatever it is that you want your re-usable component to return.

How do I add custom styles to React bootstrap? ›

Style & Bootstrap Stylesheet
  1. Import Stylesheet. Add the import statement to your index.js file or your App.js file import 'bootstrap/dist/css/bootstrap.min.css';
  2. Link Stylesheet. Use the latest Bootstrap CDN to get the latest stylesheet and add it to the head of your index. html document , located in the public folder.
Aug 6, 2020

How do you create a modal in functional component? ›

To create a good modal component in React, we should:
  1. Append modals to the end of the DOM body property, for accessibility reasons. ...
  2. Wait to mount modals to the DOM until they are shown.
  3. Remove modals from the DOM when they are hidden.

Can you create a modal within a modal? ›

To open a modal from another modal can be done simply by using the events that Bootstrap provides such as show. bs. modal . You may also want some CSS to handle the backdrop overlays.

What is the strongest modal? ›

“Must” is the strongest modal that implies a possibility will occur while “could” and “might” imply that the speaker is unsure of the action happening. Examples: The weather report showed a 99% chance of rain, so it must rain.

What are the 3 appropriate modals? ›

The three categories of modals are Epistemic (relating to speculation), Deontic (relating to ideals or regulations), and Dynamic (relating to performance).

What is the difference between modal and popup? ›

Modals. Modals, like pop-ups, are components that pop up on a user's screen. The key difference, however, is that the user would have initiated the action as part of their journey. Modals are used for specific workflows such as adding users, deleting content, sharing content, adding content, and more.

Do professionals use Bootstrap? ›

Bootstrap is widely used by professional web developers creating apps and sites for companies in many sectors.

Can I learn Bootstrap in a week? ›

It depends! If you already have a handle on front end development languages like HTML, CSS and JavaScript, you can probably pick up the basics of Bootstrap in a week or two.

What is the difference between toggle and show modal? ›

toggle() method uses the initial size and does not take into account any dynamic changes when the element is re-hidden. If you want a modal, you should use . modal() as designed, otherwise with . toggle() you're not implementing a modal at all.

How to open Bootstrap modal from code behind? ›

to do it,we have 3 steps:
  1. Create a modal structure in HTML.
  2. Create a button to call a function in java script, to open modal and set display:none in CSS .
  3. Call this button by function in code behind .

Why is Bootstrap modal not showing? ›

Bootstrap modal appears under background

If the modal container or its parent element has a fixed or relative position, the modal will not show properly.

How to implement Bootstrap modal in React? ›

How to Create Modal Component in React using Bootstrap
  1. Step 1: Generate React App.
  2. Step 2: Make Component File.
  3. Step 3: Install Bootstrap Modules.
  4. Step 4: Create Modal Component.
  5. Step 5: Update App.js File.
  6. Step 6: Serve React Application.

How to pass data in Bootstrap modal? ›

Data can be passed to the modal body from the HTML document which gets displayed when the modal pops up. To pass data into the modal body jquery methods are used. jQuery is similar to JavaScript, however jQuery methods are simple and easier to implement. jQuery reduces the lines of code.

How can I use Bootstrap modals without loading the entire library? ›

Start by clicking Toggle All to turn everything off, then select these 4 options;
  1. Buttons under Common CSS.
  2. Close icon under Components.
  3. Component animations (for JS) under JavaScript components.
  4. Modals under JavaScript components.

Do I need Bootstrap if I use React? ›

Bootstrap vs React Comparison at a Glance. While React is known for enhancing user experience by loading web pages faster, Bootstrap helps to build mobile-friendly websites, CSS designing, HTML layouts, and JavaScript functions perform well.

Should you learn Bootstrap before React? ›

Bootstrap. Yes, Bootstrap is technically a CSS and JavaScript UI library — but a pretty darn good one to learn from. It will give you the foundations of design and common patterns for things that are used all the time. And yes, there is also a Boostrap for React.

Can you use Bootstrap template with React? ›

To integrate the Bootstrap template into the React App, you must copy the HTML sections from index. html to each component. Components allow you to write code for different parts of the App and reuse them. This reduces repetition and also organizes the structure of your App.

Should I use Tailwind or Bootstrap with React? ›

Tailwind CSS is designed to offer a low-level utility classes, which allow more customization and flexibility to the developers. On the other hand, Bootstrap follows a more opinionated approach, providing a set of pre-defined classes, making it easier for developers to create a responsive design quickly.

Why would you not use Bootstrap? ›

The Disadvantages of Bootstrap are:

You would have to go the extra mile while creating a design otherwise all the websites will look the same if you don't do heavy customization. Styles are verbose and can lead to lots of output in HTML which is not needed.

Which is better Bootstrap or material UI? ›

Having looked at the various parameters of Bootstrap and Material UI, we can conclude that Bootstrap is highly responsive, offers better support and makes app development faster. Material Design, on the other hand, is aesthetically brilliant with its animations and design styles.

Is it good practice to use Bootstrap? ›

Since Bootstrap makes it easier and faster to create responsive websites, it appeals to many front-end developers and beginners in particular. However, it's not recommended by all.

How long does it take to learn Bootstrap? ›

How Long Does It Take to Learn Bootstrap? The short answer is that it depends on you. If you're a professional developer who already knows HTML, CSS and JavaScript well, you should be able to pick up Bootstrap in a few weeks if you dedicate some time to doing so.

Is React Bootstrap customizable? ›

Bootstrap makes it easy to customize the styling using existing CSS classes className='center-block' and by creating your own CSS classes className='containers' . Make sure to use camel case when you are styling in JSX.

Does React Bootstrap use styled components? ›

Styling is essential in every react project. We use both custom CSS and also use external libraries such as react bootstrap to style react components.

Which is faster Tailwind or Bootstrap? ›

If your project contains more of backend work and requires common layouts, then Bootstrap will be better. While if your project requires exclusive customization and front-end work, then Tailwind CSS will be better.

What is the main difference between Bootstrap and Tailwind? ›

Bootstrap is a component-based framework, which means it comes with prebuilt components and includes other utilities for layering displays, spacing, etc. Tailwind, on the other hand, CSS is a utility-first framework. Using Tailwind CSS is akin to writing regular CSS. Unlike Bootstrap, it has no prebuilt components.

Why not use Tailwind? ›

Tailwind forces an extra HTML-based abstraction layer for a CSS job. This is always going to be an anti-pattern. On balance, I think it's slightly worse than just using inline CSS – either via Styled Components or "vanilla CSS". At least inline CSS doesn't force me to memorize a bunch of new class names.


Top Articles
Latest Posts
Article information

Author: Nicola Considine CPA

Last Updated: 21/10/2023

Views: 6613

Rating: 4.9 / 5 (69 voted)

Reviews: 84% of readers found this page helpful

Author information

Name: Nicola Considine CPA

Birthday: 1993-02-26

Address: 3809 Clinton Inlet, East Aleisha, UT 46318-2392

Phone: +2681424145499

Job: Government Technician

Hobby: Calligraphy, Lego building, Worldbuilding, Shooting, Bird watching, Shopping, Cooking

Introduction: My name is Nicola Considine CPA, I am a determined, witty, powerful, brainy, open, smiling, proud person who loves writing and wants to share my knowledge and understanding with you.