Working with Bootstrap's Modals in React (2023)

Introduction

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

Introduction

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

bash

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.

onEntered

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};

onEnter

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(Date.now());18 };1920 const modalLoaded = () => {21 setEndTime(Date.now());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 document.body.style.backgroundColor = "white";11 };1213 const hideModal = () => {14 setIsOpen(false);15 };1617 const startTimer = () => {18 setStartTime(Date.now());19 };2021 const modalLoaded = () => {22 setEndTime(Date.now());23 };2425 const onExit = () => {26 setTitle("Goodbye 😀");27 };2829 const onExited = () => {30 document.body.style.backgroundColor = "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};

Sizing

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};

Conclusion

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.

FAQs

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

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

Apr 24, 2023

Learn More ›

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.

Discover More Details ›

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.

Learn More Now ›

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.

How do I create a custom modal in Reactjs? ›

Let's create a Basic Modal component

<div className="App"> <button> Modal </button> </div>
import { useState } from "react"; import "./App. ...
const Modal = () => { return ( <div> Modal </div> ); }; export default Modal;
<div id="modal" /> <div id="root" />

Jun 10, 2021

Keep Reading ›

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.

See Details ›

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.

Explore More ›

How to show Bootstrap modal using js? ›

Bootstrap JS Modal

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

Show Me More ›

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';

Keep Reading ›

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');

Read The Full Story ›

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.

Discover More ›

What is replacing React? ›

The Bottom Line: Will Next.js Replace React.

See Details ›

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.

More items...

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.

Discover More Details ›

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.

Explore More ›

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.

Discover More ›

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.

Read On ›

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.

View Details ›

How to make React bootstrap work? ›

Install React Bootstrap package (such as bootstrap-react or reactstrap).

Using Bootstrap CDN. This is one of the easiest ways to use bootstrap in your React app. ...
Import Bootstrap as a Dependency. ...
Install React Bootstrap Package.

Apr 12, 2023

See Details ›

How do I open modal automatically in React? ›

Set up the Modal Component

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

More items...

May 18, 2020

Learn More Now ›

How do you use multiple modals in React? ›

React multi modal library

NPM. $ npm install react-multi-modal.
Yarn. $ yarn add react-multi-modal. ...
ModalRoot component. The ModalRoot component will render any component you pass in the showModal method and it acts like a placeholder. ...
Provider component. ...
Context object. ...
Using a Context.Consumer. ...
Using useContext hook.

Mar 30, 2020

Keep Reading ›

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.

Show Me More ›

How do I add custom styles to React bootstrap? ›

Style & Bootstrap Stylesheet

Import Stylesheet. Add the import statement to your index.js file or your App.js file import 'bootstrap/dist/css/bootstrap.min.css';
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

Learn More ›

How do you create a modal in functional component? ›

To create a good modal component in React, we should:

Append modals to the end of the DOM body property, for accessibility reasons. ...
Wait to mount modals to the DOM until they are shown.
Remove modals from the DOM when they are hidden.

More items...

Learn More Now ›

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.

View Details ›

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.

Keep Reading ›

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).

Get More Info Here ›

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.

Know More ›

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.

Get More Info Here ›

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.

Discover More Details ›

How to open Bootstrap modal from code behind? ›

to do it,we have 3 steps:

Create a modal structure in HTML.
Create a button to call a function in java script, to open modal and set display:none in CSS .
Call this button by function in code behind .

Read The Full Story ›

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.

Keep Reading ›

How to implement Bootstrap modal in React? ›

How to Create Modal Component in React using Bootstrap

Step 1: Generate React App.
Step 2: Make Component File.
Step 3: Install Bootstrap Modules.
Step 4: Create Modal Component.
Step 5: Update App.js File.
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.

Discover More Details ›

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;

Buttons under Common CSS.
Close icon under Components.
Component animations (for JS) under JavaScript components.
Modals under JavaScript components.

Tell Me More ›

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.

Get More Info Here ›

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.

View Details ›

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.

Explore More ›

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.

Discover More Details ›

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.

Discover More Details ›

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.

Read On ›

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.

Find Out More ›

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.

See Details ›

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.

See Details ›

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.

Explore More ›

Working with Bootstrap's Modals in React (2023)

Introduction

Installing React-Bootstrap

Hiding/Showing a Modal

Modal Events

onEntered

onEnter

onExit and onExited

Customizing the Modal

as property

Sizing

Conclusion

FAQs

Does Bootstrap work well with React? ›

How do I create a custom modal in Reactjs? ›

Does Bootstrap modal need JavaScript? ›

How do you make reusable UI components in React? ›

How to open Bootstrap modal from code behind? ›

Which is better Bootstrap or material UI? ›

References

`as` property