React Bootstrap Modal Component

How to use the React Bootstrap Modal component#

The React Bootstrap Modal component offers a lightweight, flexible popup for dialogs, alerts, and forms. It's fully customizable and accessible, with support for animations, scrollable content, multiple sizes, and more.

Static React Bootstrap Modal example#

This static modal example shows the structure of a modal with header, body, and footer content.

<CModal>
  <CModalHeader>
    <CModalTitle>React Modal title</CModalTitle>
  </CModalHeader>
  <CModalBody>
    <p>React Modal body text goes here.</p>
  </CModalBody>
  <CModalFooter>
    <CButton color="secondary">Close</CButton>
    <CButton color="primary">Save changes</CButton>
  </CModalFooter>
</CModal>

Live demo#

Static backdrop#

Scrolling long content#

Vertically centered modals#

Tooltips and popovers in modals#

Toggle between modals#

Change modal animation#

Use Sass variables like $modal-fade-transform and $modal-show-transform to customize animation. For example:

$modal-fade-transform: scale(0.8);

Remove modal animation#

Disable animation with:

<CModal transition={false}>...</CModal>

Accessibility tips#

Use aria-labelledby and aria-describedby on <CModal> for improved screen reader support. CoreUI adds required roles and aria attributes automatically.

React Bootstrap Modal sizes#

Modals come in predefined sizes via the size prop.

Fullscreen React Bootstrap Modals#

Use the fullscreen prop to make modals expand to full viewport width/height. You can apply it conditionally based on breakpoints.

API reference#

Explore the API for the React Bootstrap Modal component and its related parts:

• <CModal />
• <CModalBody />
• <CModalFooter />
• <CModalHeader />
• <CModalTitle />