---
title: React Bootstrap Modal Component
name: Modal with Bootstrap Styling
description: Learn how to use the React Bootstrap Modal component from CoreUI to create accessible, responsive dialogs, confirmations, and popups using Bootstrap-styled modals.
route: /components/modal/
bootstrap_component: true
---

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

<Example>
  <div className="modal position-static d-block" tabIndex="-1">
    <div className="modal-dialog">
      <div className="modal-content">
        <div className="modal-header">
          <h5 className="modal-title">React Modal title</h5>
          <button type="button" className="btn-close" aria-label="Close"></button>
        </div>
        <div className="modal-body">
          <p>React Modal body text goes here.</p>
        </div>
        <div className="modal-footer">
          <button type="button" className="btn btn-secondary">Close</button>
          <button type="button" className="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</Example>

```jsx
<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

<ExampleSnippet className="theme-bootstrap" component="ModalLiveDemoExample" componentName="React Bootstrap Modal" />

### Static backdrop

<ExampleSnippet className="theme-bootstrap" component="ModalStaticBackdropExample" componentName="React Bootstrap Modal" />

### Scrolling long content

<ExampleSnippet className="theme-bootstrap" component="ModalScrollingLongContentExample" componentName="React Bootstrap Modal" />

<ExampleSnippet className="theme-bootstrap" component="ModalScrollingLongContent2Example" componentName="React Bootstrap Modal" />

### Vertically centered modals

<ExampleSnippet className="theme-bootstrap" component="ModalVerticallyCenteredExample" componentName="React Bootstrap Modal" />
<ExampleSnippet className="theme-bootstrap" component="ModalVerticallyCenteredScrollableExample" componentName="React Bootstrap Modal" />

### Tooltips and popovers in modals

<ExampleSnippet className="theme-bootstrap" component="ModalTooltipsAndPopoversExample" componentName="React Bootstrap Modal" />

### Toggle between modals

<ExampleSnippet className="theme-bootstrap" component="ModalToggleBetweenModalsExample" componentName="React Bootstrap Modal" />

### Change modal animation

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

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

### Remove modal animation

Disable animation with:

```jsx
<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.

| Size        | Prop     | Max width |
|-------------|----------|-----------|
| Small       | `'sm'`   | 300px     |
| Default     | —        | 500px     |
| Large       | `'lg'`   | 800px     |
| Extra large | `'xl'`   | 1140px    |

<ExampleSnippet className="theme-bootstrap" component="ModalOptionalSizesExample" componentName="React Bootstrap Modal" />

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

| Fullscreen prop | Breakpoint         |
|------------------|--------------------|
| `true`           | Always             |
| `'sm'`           | Below 576px        |
| `'md'`           | Below 768px        |
| `'lg'`           | Below 992px        |
| `'xl'`           | Below 1200px       |
| `'xxl'`          | Below 1400px       |

<ExampleSnippet className="theme-bootstrap" component="ModalFullscreenExample" componentName="React Bootstrap Modal" />

## API reference

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

- [&lt;CModal /&gt;](../api/#cmodal)
- [&lt;CModalBody /&gt;](../api/#cmodalbody)
- [&lt;CModalFooter /&gt;](../api/#cmodalfooter)
- [&lt;CModalHeader /&gt;](../api/#cmodalheader)
- [&lt;CModalTitle /&gt;](../api/#cmodaltitle)