Select Page

Modals

A Modal is a dialogue box that sits on top of the current page. Modals block access to the rest of the page and force user interactions.

How it works

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

  • Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead.
  • Clicking on the modal “backdrop” will automatically close the modal.
  • Bootstrap only supports one modal window at a time. Nested modals aren’t supported as we believe them to be 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 our browser support docs for details.

Examples

Below is a static modal example.

Modal title

Modal body text goes here.

System colors

Never use full black on a white background, or a full white on a black background. These are the suggested colors to improve legibility: