Add dialogs to your site for lightboxes, user notifications, or completely custom content.
- Modals are positioned over everything else in the document and remove scroll from the
<body>so that modal content scrolls instead.
- Modals are unmounted when closed.
- Bootstrap only supports one modal window at a time. Nested modals aren't supported,
but if you really need them, the underlying
@restart/uilibrary can support them if you're willing.
- Modal's "trap" focus in them, ensuring the keyboard navigation cycles through the modal, and not the rest of the page.
- Unlike vanilla Bootstrap,
autoFocusworks in Modals because React handles the implementation.
Below is a static modal dialog (without the positioning) to demonstrate the look and feel of the Modal.
A modal with header, body, and set of actions in the footer. Use
<Modal/> in combination with
other components to show or hide your Modal. The
<Modal/> Component comes with a few convenient
which you can use to build the Modal content.
When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.
A Modal can also be without an animation. For that set the
animation prop to
The Modal Header, Title, Body, and Footer components are available as static properties the
component, but you can also, import them directly like:
You can vertically center a modal by passing the
Using the grid
You can use grid layouts within a model using regular grid components inside the modal content.
Focus on specific element
You can focus on an element inside the modal using
autoFocus attribute on the element.
You can specify a Bootstrap large or small modal by using the
You can use the
fullscreen prop to make the modal fullscreen. Specifying a breakpoint will
only set the modal as fullscreen below the breakpoint size.
Sizing modals using custom CSS
You can apply custom css to the modal dialog div using the
dialogClassName prop. Example
is using a custom css class with width set to 90%.