In this tutorial we will customize the styling of the React Bootstrap Backdrop and also show how to remove it. The modal has some great props for controlling the backdrop, but we still need to explore the modal styling with dev tools.
Here’s one of the modals we will build:

Full code is in the Resources section.
How to Change Background Color and Opacity of React Bootstrap Backdrop
The React Bootstrap modal has some great props for controlling the modal. One potentially useful class for styling the backdrop is backdropClassName
, which lets us add a custom class to the backdrop.
Instead of adding a custom class, I customized the variable that Bootstrap uses in the backdrop:
$modal-backdrop-bg: green;
$modal-backdrop-opacity: 0.6;
@import "bootstrap/scss/bootstrap";
$modal-backdrop-bg
is used to control the --bs-backdrop-bg
value and is assigned in the _modal.scss
file, and $modal-backdrop-opacity
controls the --bs-backdrop-opacity
value.

Another alternative for customizing the backdrop is to target the modal-backdrop
class that exists on the backdrop by default. One thing to be careful about is that you select the div with modal-backdrop
class instead of the div with class modal
when exploring the backdrop in the DOM.
.modal-backdrop {
margin:4px;
}
Of course you most likely don’t want margin on your backdrop, this is just an example to show the selector. Here’s how to set modal size.
How to Remove React Bootstrap Modal Backdrop
There are two ways to remove the modal backdrop:
- using the built-in prop (this is the best way)
- setting
display: none
on the modal
React Bootstrap provides a useful prop simply called backdrop
. This accepts three values: "static"
, true
, and false
. If the value is set to false, then there is no backdrop when the modal is open. This removes the backdrop from being rendered and removes the div with class modal-backdrop
from the DOM tree.
Another alternative is to set the backdrop to not display using CSS:
.modal-backdrop {
display: none;
}
There are two problems with this. First, it is always wise to use props because there may be other features that the prop disables that we haven’t thought of. Second, in this case simply setting the backdrop to not display does not disable the close on click outside the backdrop. We definitely this disabled if the elements in the background appear clickable.
How to Keep Modal Open on Backdrop Click
If we want to keep the modal open on backdrop click, we need to use the "static"
value of the backdrop
prop.
<Modal backdrop="static" />
This renders the backdrop like normal (the default backdrop
value is true
) but when the backdrop is clicked, the modal does not close. Instead, there is a nice animation that briefly and mildly scales the backdrop up and down to indicate that the close button on the backdrop must be clicked to close it.
The purpose of the static backdrop is to emphasize the modal and make sure that the user has at least acknowledged the modal enough to click on it.
Here’s a tutorial on customizing the appearance of the modal close button.
Resources
Here is the code for this tutorial:
//CustomBackdropModal.tsx
import React, { useState } from 'react';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
import "./CustomBackdropModal.scss";
export default function CustomBackdropModal() {
const [show, setShow] = useState(false);
const [backdrop, setBackdrop] = useState(true);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const toggleBackdrop = () => setBackdrop(!backdrop);
return (
<>
<Button variant="primary" onClick={handleShow}>
Custom Backdrop
</Button>
<Modal show={show} onHide={handleClose} backdrop={backdrop ? "static" : false}>
<Modal.Header
closeButton
>
<Modal.Title>Nice Backdrop!</Modal.Title>
</Modal.Header>
<Modal.Body>Toggle the Backdrop!</Modal.Body>
<Modal.Footer>
<Button variant="primary" onClick={toggleBackdrop}>
Add/Remove Backdrop
</Button>
</Modal.Footer>
</Modal>
</>
);
}
//CustomBackdropModal.scss
$modal-backdrop-bg: green;
$modal-backdrop-opacity: 0.6;
@import "bootstrap/scss/bootstrap";
// .modal-backdrop {
// margin:4px;
// }