Modal

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

How it works

Before getting started with Bootstrap’s modal component, be sure to read the following as Bootstrap's menu options have recently changed.

  • Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document.
  • Add .modal-dialog-scrollable to the .modal-dialog to make the .modal-content scrollabale.
  • Clicking on the modal "backdrop" is disabled and will not automatically close the modal.
  • Bootstrap only supports one modal window at a time, but in my case nested modals are supported. It is not recommended as it leads to poor user experiences.
  • Modals use position: fixed, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You’ll likely run into issues when nesting a .modal within another fixed element.
  • Once again, due to position: fixed, there are some caveats with using modals on mobile devices. See the Bootstrap browser support docs for details.

Examples

Below is a static modal example (meaning its position and display have been overridden). Included are the modal header, modal body (required for padding), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.

With tabs