Components

#Static Markup

A modal dialog component

<div className="static-modal">
  <Modal.Dialog>
    <Modal.Header>
      <Modal.Title>Modal title</Modal.Title>
    </Modal.Header>

    <Modal.Body>One fine body...</Modal.Body>

    <Modal.Footer>
      <Button>Close</Button>
      <Button bsStyle="primary">Save changes</Button>
    </Modal.Footer>
  </Modal.Dialog>
</div>;

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.

Click to get the full Modal experience!

class Example extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.handleShow = this.handleShow.bind(this);
    this.handleClose = this.handleClose.bind(this);

    this.state = {
      show: false
    };
  }

  handleClose() {
    this.setState({ show: false });
  }

  handleShow() {
    this.setState({ show: true });
  }

  render() {
    const popover = (
      <Popover id="modal-popover" title="popover">
        very popover. such engagement
      </Popover>
    );
    const tooltip = <Tooltip id="modal-tooltip">wow.</Tooltip>;

    return (
      <div>
        <p>Click to get the full Modal experience!</p>

        <Button bsStyle="primary" bsSize="large" onClick={this.handleShow}>
          Launch demo modal
        </Button>

        <Modal show={this.state.show} onHide={this.handleClose}>
          <Modal.Header closeButton>
            <Modal.Title>Modal heading</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <h4>Text in a modal</h4>
            <p>
              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
            </p>

            <h4>Popover in a modal</h4>
            <p>
              there is a{' '}
              <OverlayTrigger overlay={popover}>
                <a href="#popover">popover</a>
              </OverlayTrigger>{' '}
              here
            </p>

            <h4>Tooltips in a modal</h4>
            <p>
              there is a{' '}
              <OverlayTrigger overlay={tooltip}>
                <a href="#tooltip">tooltip</a>
              </OverlayTrigger>{' '}
              here
            </p>

            <hr />

            <h4>Overflowing text to show scroll behavior</h4>
            <p>
              Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
              dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
              ac consectetur ac, vestibulum at eros.
            </p>
            <p>
              Praesent commodo cursus magna, vel scelerisque nisl consectetur
              et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
              auctor.
            </p>
            <p>
              Aenean lacinia bibendum nulla sed consectetur. Praesent commodo
              cursus magna, vel scelerisque nisl consectetur et. Donec sed odio
              dui. Donec ullamcorper nulla non metus auctor fringilla.
            </p>
            <p>
              Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
              dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
              ac consectetur ac, vestibulum at eros.
            </p>
            <p>
              Praesent commodo cursus magna, vel scelerisque nisl consectetur
              et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
              auctor.
            </p>
            <p>
              Aenean lacinia bibendum nulla sed consectetur. Praesent commodo
              cursus magna, vel scelerisque nisl consectetur et. Donec sed odio
              dui. Donec ullamcorper nulla non metus auctor fringilla.
            </p>
            <p>
              Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
              dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
              ac consectetur ac, vestibulum at eros.
            </p>
            <p>
              Praesent commodo cursus magna, vel scelerisque nisl consectetur
              et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
              auctor.
            </p>
            <p>
              Aenean lacinia bibendum nulla sed consectetur. Praesent commodo
              cursus magna, vel scelerisque nisl consectetur et. Donec sed odio
              dui. Donec ullamcorper nulla non metus auctor fringilla.
            </p>
          </Modal.Body>
          <Modal.Footer>
            <Button onClick={this.handleClose}>Close</Button>
          </Modal.Footer>
        </Modal>
      </div>
    );
  }
}

render(<Example />);

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 from the /lib directory like: require("react-bootstrap/lib/ModalHeader").

#Contained Modal

You will need to add the following css to your project and ensure that your container has the modal-container class.

.modal-container {
  position: relative;
}
.modal-container .modal, .modal-container .modal-backdrop {
  position: absolute;
}

/**
 * You will want to include this bit of css
 *
 * .modal-container {
 *   position: relative;
 * }
 * .modal-container .modal, .modal-container .modal-backdrop {
 *   position: absolute;
 * }
 */

class Trigger extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.handleHide = this.handleHide.bind(this);

    this.state = {
      show: false
    };
  }

  handleHide() {
    this.setState({ show: false });
  }

  render() {
    return (
      <div className="modal-container" style={{ height: 200 }}>
        <Button
          bsStyle="primary"
          bsSize="large"
          onClick={() => this.setState({ show: true })}
        >
          Launch contained modal
        </Button>

        <Modal
          show={this.state.show}
          onHide={this.handleHide}
          container={this}
          aria-labelledby="contained-modal-title"
        >
          <Modal.Header closeButton>
            <Modal.Title id="contained-modal-title">
              Contained Modal
            </Modal.Title>
          </Modal.Header>
          <Modal.Body>
            Elit est explicabo ipsum eaque dolorem blanditiis doloribus sed id
            ipsam, beatae, rem fuga id earum? Inventore et facilis obcaecati.
          </Modal.Body>
          <Modal.Footer>
            <Button onClick={this.handleHide}>Close</Button>
          </Modal.Footer>
        </Modal>
      </div>
    );
  }
}

render(<Trigger />);

#Sizing modals using standard Bootstrap props

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

class MySmallModal extends React.Component {
  render() {
    return (
      <Modal
        {...this.props}
        bsSize="small"
        aria-labelledby="contained-modal-title-sm"
      >
        <Modal.Header closeButton>
          <Modal.Title id="contained-modal-title-sm">Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <h4>Wrapped Text</h4>
          <p>
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
            ac consectetur ac, vestibulum at eros.
          </p>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
            Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
            auctor.
          </p>
          <p>
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo
            cursus magna, vel scelerisque nisl consectetur et. Donec sed odio
            dui. Donec ullamcorper nulla non metus auctor fringilla.
          </p>
          <p>
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
            ac consectetur ac, vestibulum at eros.
          </p>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
            Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
            auctor.
          </p>
          <p>
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo
            cursus magna, vel scelerisque nisl consectetur et. Donec sed odio
            dui. Donec ullamcorper nulla non metus auctor fringilla.
          </p>
          <p>
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
            ac consectetur ac, vestibulum at eros.
          </p>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
            Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
            auctor.
          </p>
          <p>
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo
            cursus magna, vel scelerisque nisl consectetur et. Donec sed odio
            dui. Donec ullamcorper nulla non metus auctor fringilla.
          </p>
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={this.props.onHide}>Close</Button>
        </Modal.Footer>
      </Modal>
    );
  }
}

class MyLargeModal extends React.Component {
  render() {
    return (
      <Modal
        {...this.props}
        bsSize="large"
        aria-labelledby="contained-modal-title-lg"
      >
        <Modal.Header closeButton>
          <Modal.Title id="contained-modal-title-lg">Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <h4>Wrapped Text</h4>
          <p>
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
            ac consectetur ac, vestibulum at eros.
          </p>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
            Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
            auctor.
          </p>
          <p>
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo
            cursus magna, vel scelerisque nisl consectetur et. Donec sed odio
            dui. Donec ullamcorper nulla non metus auctor fringilla.
          </p>
          <p>
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
            ac consectetur ac, vestibulum at eros.
          </p>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
            Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
            auctor.
          </p>
          <p>
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo
            cursus magna, vel scelerisque nisl consectetur et. Donec sed odio
            dui. Donec ullamcorper nulla non metus auctor fringilla.
          </p>
          <p>
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
            ac consectetur ac, vestibulum at eros.
          </p>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
            Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
            auctor.
          </p>
          <p>
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo
            cursus magna, vel scelerisque nisl consectetur et. Donec sed odio
            dui. Donec ullamcorper nulla non metus auctor fringilla.
          </p>
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={this.props.onHide}>Close</Button>
        </Modal.Footer>
      </Modal>
    );
  }
}

class App extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      smShow: false,
      lgShow: false
    };
  }

  render() {
    let smClose = () => this.setState({ smShow: false });
    let lgClose = () => this.setState({ lgShow: false });

    return (
      <ButtonToolbar>
        <Button
          bsStyle="primary"
          onClick={() => this.setState({ smShow: true })}
        >
          Launch small demo modal
        </Button>
        <Button
          bsStyle="primary"
          onClick={() => this.setState({ lgShow: true })}
        >
          Launch large demo modal
        </Button>

        <MySmallModal show={this.state.smShow} onHide={smClose} />
        <MyLargeModal show={this.state.lgShow} onHide={lgClose} />
      </ButtonToolbar>
    );
  }
}

render(<App />);

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

class Example extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.handleShow = this.handleShow.bind(this);
    this.handleHide = this.handleHide.bind(this);

    this.state = {
      show: false
    };
  }

  handleShow() {
    this.setState({ show: true });
  }

  handleHide() {
    this.setState({ show: false });
  }

  render() {
    return (
      <ButtonToolbar>
        <Button bsStyle="primary" onClick={this.handleShow}>
          Launch demo modal
        </Button>

        <Modal
          {...this.props}
          show={this.state.show}
          onHide={this.handleHide}
          dialogClassName="custom-modal"
        >
          <Modal.Header closeButton>
            <Modal.Title id="contained-modal-title-lg">
              Modal heading
            </Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <h4>Wrapped Text</h4>
            <p>
              Ipsum molestiae natus adipisci modi eligendi? Debitis amet quae
              unde commodi aspernatur enim, consectetur. Cumque deleniti
              temporibus ipsam atque a dolores quisquam quisquam adipisci
              possimus laboriosam. Quibusdam facilis doloribus debitis! Sit
              quasi quod accusamus eos quod. Ab quos consequuntur eaque quo rem!
              Mollitia reiciendis porro quo magni incidunt dolore amet atque
              facilis ipsum deleniti rem! Dolores debitis voluptatibus ipsum
              dicta. Dolor quod amet ab sint esse distinctio tenetur. Veritatis
              laudantium quibusdam quidem corporis architecto veritatis. Ex
              facilis minima beatae sunt perspiciatis placeat. Quasi corporis
              odio eaque voluptatibus ratione magnam nulla? Amet cum maiores
              consequuntur totam dicta! Inventore adipisicing vel vero odio modi
              doloremque? Vitae porro impedit ea minima laboriosam quisquam
              neque. Perspiciatis omnis obcaecati consequatur sunt deleniti
              similique facilis sequi. Ipsum harum vitae modi reiciendis
              officiis. Quas laudantium laudantium modi corporis nihil provident
              consectetur omnis, natus nulla distinctio illum corporis. Sit ex
              earum odio ratione consequatur odit minus laborum? Eos? Sit ipsum
              illum architecto aspernatur perspiciatis error fuga illum, tempora
              harum earum, a dolores. Animi facilis inventore harum dolore
              accusamus fuga provident molestiae eum! Odit dicta error dolorem
              sunt reprehenderit. Sit similique iure quae obcaecati harum. Eum
              saepe fugit magnam dicta aliquam? Sapiente possimus aliquam fugiat
              officia culpa sint! Beatae voluptates voluptatem excepturi
              molestiae alias in tenetur beatae placeat architecto. Sit possimus
              rerum fugiat sapiente aspernatur. Necessitatibus tempora animi
              dicta perspiciatis tempora a velit in! Doloribus perspiciatis
              doloribus suscipit nam earum. Deleniti veritatis eaque totam
              assumenda fuga sapiente! Id recusandae. Consectetur necessitatibus
              eaque velit nobis aliquid? Fugit illum qui suscipit aspernatur
              alias ipsum repudiandae! Quia omnis quisquam dignissimos a
              mollitia. Suscipit aspernatur eum maiores repellendus ipsum
              doloribus alias voluptatum consequatur. Consectetur quibusdam
              veniam quas tenetur necessitatibus repudiandae? Rem optio vel
              alias neque optio sapiente quidem similique reiciendis tempore.
              Illum accusamus officia cum enim minima eligendi consectetur nemo
              veritatis nam nisi! Adipisicing nobis perspiciatis dolorum
              adipisci soluta architecto doloremque voluptatibus omnis debitis
              quas repellendus. Consequuntur assumenda illum commodi mollitia
              asperiores? Quis aspernatur consequatur modi veritatis aliquid at?
              Atque vel iure quos. Amet provident voluptatem amet aliquam
              deserunt sint, elit dolorem ipsa, voluptas? Quos esse facilis
              neque nihil sequi non? Voluptates rem ab quae dicta culpa dolorum
              sed atque molestias debitis omnis! Sit sint repellendus deleniti
              officiis distinctio. Impedit vel quos harum doloribus corporis.
              Laborum ullam nemo quaerat reiciendis recusandae minima dicta
              molestias rerum. Voluptas et ut omnis est ipsum accusamus harum.
              Amet exercitationem quasi velit inventore neque doloremque!
              Consequatur neque dolorem vel impedit sunt voluptate. Amet quo
              amet magni exercitationem libero recusandae possimus pariatur.
              Cumque eum blanditiis vel vitae distinctio! Tempora! Consectetur
              sit eligendi neque sunt soluta laudantium natus qui aperiam
              quisquam consectetur consequatur sit sint a unde et. At voluptas
              ut officiis esse totam quasi dolorem! Hic deserunt doloribus
              repudiandae! Lorem quod ab nostrum asperiores aliquam ab id
              consequatur, expedita? Tempora quaerat ex ea temporibus in tempore
              voluptates cumque. Quidem nam dolor reiciendis qui dolor assumenda
              ipsam veritatis quasi. Esse! Sit consectetur hic et sunt iste!
              Accusantium atque elit voluptate asperiores corrupti temporibus
              mollitia! Placeat soluta odio ad blanditiis nisi. Eius reiciendis
              id quos dolorum eaque suscipit magni delectus maxime. Sit odit
              provident vel magnam quod. Possimus eligendi non corrupti tenetur
              culpa accusantium quod quis. Voluptatum quaerat animi dolore
              maiores molestias voluptate? Necessitatibus illo omnis laborum hic
              enim minima! Similique. Dolor voluptatum reprehenderit nihil
              adipisci aperiam voluptatem soluta magnam accusamus iste incidunt
              tempore consequatur illo illo odit. Asperiores nesciunt iusto nemo
              animi ratione. Sunt odit similique doloribus temporibus
              reiciendis! Ullam. Dolor dolores veniam animi sequi dolores
              molestias voluptatem iure velit. Elit dolore quaerat incidunt enim
              aut distinctio. Ratione molestiae laboriosam similique laboriosam
              eum et nemo expedita. Consequuntur perspiciatis cumque dolorem.
            </p>
          </Modal.Body>
          <Modal.Footer>
            <Button onClick={this.handleHide}>Close</Button>
          </Modal.Footer>
        </Modal>
      </ButtonToolbar>
    );
  }
}

render(<Example />);

#Multiple Modals

Not supported

React-Bootstrap modals are not designed to support rendering multiple modals simultaneously. You will have to add react-overlays as a dependency and build your own modal component using its <ModalManager/> component, which supports multiple modals.

#Props

#Modal [source]

Name	Type	Default	Description
backdrop	one of: `'static'`, `true`, `false`		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".
keyboard	boolean		Close the modal when escape key is pressed
animation	boolean	true	Open and close the Modal with a slide and fade animation.
dialogComponentClass	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.
autoFocus	boolean		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.
enforceFocus	boolean		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.
restoreFocus	boolean		When `true` The modal will restore focus to previously focused element once modal is hidden
show	boolean		When `true` The modal will show itself.
onHide	function		A callback fired when the header closeButton or non-static backdrop is clicked. Required if either are specified.
onEnter	function		Callback fired before the Modal transitions in
onEntering	function		Callback fired as the Modal begins to transition in
onEntered	function		Callback fired after the Modal finishes transitioning in
onExit	function		Callback fired right before the Modal transitions out
onExiting	function		Callback fired as the Modal begins to transition out
onExited	function		Callback fired after the Modal finishes transitioning out
bsSize	one of: `"lg"`, `"large"`, `"sm"`, `"small"`		Component size variations.
bsClass	string	'modal'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.

#Modal.Dialog [source]

Name	Type	Default	Description
dialogClassName	string		A css class to apply to the Modal dialog DOM node.
bsSize	one of: `"lg"`, `"large"`, `"sm"`, `"small"`		Component size variations.
bsClass	string	'modal'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.

#Modal.Header [source]

Name	Type	Default	Description
closeLabel	string	'Close'	Provides an accessible label for the close button. It is used for Assistive Technology when the label text is not readable.
closeButton	boolean	false	Specify whether the Component should contain a 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`.
bsClass	string	'modal-header'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.

#Modal.Title [source]

Name	Type	Default	Description
componentClass	elementType	'h4'	You can use a custom element type for this component.
bsClass	string	'modal-title'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.

#Modal.Body [source]

Name	Type	Default	Description
componentClass	elementType	'div'	You can use a custom element type for this component.
bsClass	string	'modal-body'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.

#Modal.Footer [source]

Name	Type	Default	Description
componentClass	elementType	'div'	You can use a custom element type for this component.
bsClass	string	'modal-footer'	Base CSS class and prefix for the component. Generally one should only change `bsClass` to provide new, non-Bootstrap, CSS styles for a component.