Modals

    Add dialogs to your site for lightboxes, user notifications, or completely custom content.

    Overview

    • 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 react-overlays 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, autoFocus works in Modals because React handles the implementation.

    Examples

    Static Markup

    Below is a static modal dialog (without the positioning) to demonstrate the look and feel of the Modal.

    Live demo

    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 "sub components": <Modal.Header/>, <Modal.Title/>, <Modal.Body/>, and <Modal.Footer/>, which you can use to build the Modal content.

    Static backdrop

    When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.

    Without Animation

    A Modal can also be without an animation. For that set the "animation" prop to false.

    Additional Import Options

    The Modal Header, Title, Body, and Footer components are available as static properties the <Modal/> component, but you can also, import them directly like: require("react-bootstrap/ModalHeader").

    You can vertically center a modal by passing the "centered" prop.

    You can use grid layouts within a model using regular grid components inside the modal content.

    You can specify a bootstrap large or small modal by using the size prop.

    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.

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

    API

    import Modal from 'react-bootstrap/Modal'Copy import code for the Modal component
    NameTypeDefaultDescription
    animation
    boolean
    true

    Open and close the Modal with a slide and fade animation.

    aria-labelledby
    any
    autoFocus
    boolean
    true

    When true The modal will automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. Generally this should never be set to false as it makes the Modal less accessible to assistive technologies, like screen-readers.

    backdrop
    'static' | true | false
    true

    Include a backdrop component. Specify 'static' for a backdrop that doesn't trigger an "onHide" when clicked.

    backdropClassName
    string

    Add an optional extra class name to .modal-backdrop It could end up looking like class="modal-backdrop foo-modal-backdrop in".

    centered
    boolean

    vertically center the Dialog in the window

    container
    any
    contentClassName
    string

    Add an optional extra class name to .modal-content

    dialogAs
    elementType
    <ModalDialog>

    A Component type that provides the modal content Markup. This is a useful prop when you want to use your own styles and markup to create a custom modal component.

    dialogClassName
    string

    A css class to apply to the Modal dialog DOM node.

    enforceFocus
    boolean
    true

    When true The modal will prevent focus from leaving the Modal while open. Consider leaving the default value here, as it is necessary to make the Modal work well with assistive technologies, such as screen readers.

    fullscreen
    true | 'sm-down' | 'md-down' | 'lg-down' | 'xl-down' | 'xxl-down'

    Renders a fullscreen modal. Specifying a breakpoint will render the modal as fullscreen below the breakpoint size.

    keyboard
    boolean
    true

    Close the modal when escape key is pressed

    manager
    object

    A ModalManager instance used to track and manage the state of open Modals. Useful when customizing how modals interact within a container

    onEnter
    function

    Callback fired before the Modal transitions in

    onEntered
    function

    Callback fired after the Modal finishes transitioning in

    onEntering
    function

    Callback fired as the Modal begins to transition in

    onEscapeKeyDown
    function

    A callback fired when the escape key, if specified in keyboard, is pressed.

    onExit
    function

    Callback fired right before the Modal transitions out

    onExited
    function

    Callback fired after the Modal finishes transitioning out

    onExiting
    function

    Callback fired as the Modal begins to transition out

    onHide
    function

    A callback fired when the header closeButton or non-static backdrop is clicked. Required if either are specified.

    onShow
    function

    A callback fired when the Modal is opening.

    restoreFocus
    boolean
    true

    When true The modal will restore focus to previously focused element once modal is hidden

    restoreFocusOptions
    shape

    Options passed to focus function when restoreFocus is set to true

    scrollable
    boolean

    Allows scrolling the <Modal.Body> instead of the entire Modal when overflowing.

    show
    boolean
    false

    When true The modal will show itself.

    size
    'sm' | 'lg' | 'xl'

    Render a large, extra large or small modal. When not provided, the modal is rendered with medium (default) size.

    bsPrefix
    string
    'modal'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    import ModalDialog from 'react-bootstrap/ModalDialog'Copy import code for the ModalDialog component
    NameTypeDefaultDescription
    centered
    boolean

    Specify whether the Component should be vertically centered

    contentClassName
    string
    fullscreen
    true | 'sm-down' | 'md-down' | 'lg-down' | 'xl-down' | 'xxl-down'

    Renders a fullscreen modal. Specifying a breakpoint will render the modal as fullscreen below the breakpoint size.

    scrollable
    boolean

    Allows scrolling the <Modal.Body> instead of the entire Modal when overflowing.

    size
    'sm' | 'lg','xl'

    Render a large, extra large or small modal.

    bsPrefix
    string
    'modal'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    import ModalHeader from 'react-bootstrap/ModalHeader'Copy import code for the ModalHeader component
    NameTypeDefaultDescription
    closeButton
    boolean
    false

    Specify whether the Component should contain a close button

    closeLabel
    string
    'Close'

    Provides an accessible label for the close button. It is used for Assistive Technology when the label text is not readable.

    closeVariant
    'white'

    Sets the variant for close button.

    onHide
    function

    A Callback fired when the close button is clicked. If used directly inside a Modal component, the onHide will automatically be propagated up to the parent Modal onHide.

    bsPrefix
    string
    'modal-header'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    import ModalTitle from 'react-bootstrap/ModalTitle'Copy import code for the ModalTitle component
    NameTypeDefaultDescription
    as
    elementType
    <DivStyledAsH4>

    You can use a custom element type for this component.

    bsPrefix required
    string
    'modal-title'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    import ModalBody from 'react-bootstrap/ModalBody'Copy import code for the ModalBody component
    NameTypeDefaultDescription
    as
    elementType
    <div>

    You can use a custom element type for this component.

    bsPrefix required
    string
    'modal-body'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    import ModalFooter from 'react-bootstrap/ModalFooter'Copy import code for the ModalFooter component
    NameTypeDefaultDescription
    as
    elementType
    <div>

    You can use a custom element type for this component.

    bsPrefix required
    string
    'modal-footer'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.