Components

## Modals

Add dialogs to your site for lightboxes, user notifications, or completely custom content. Read the Official Bootstrap Documentation for a full list of instructions and other options.

##### Basic Example

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

##### Modal title

Modal body text goes here.

##### Vertically Centered

Display modal in the center of the screen by adding `.modal-dialog-centered` to `.modal-dialog`.

Vertically Centered Modal

##### Static Backdrop

When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.

Launch static backdrop modal

##### Fullscreen Modal

Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a `.modal-dialog`.

Launch full screen modal

##### Optional Sizes

Modals have three optional sizes, available via modifier classes to be placed on a `.modal-dialog`.

Extra large modal
Large modal
Small modal

##### Remove Animation

For modals that simply appear rather than fade in to view, remove the .fade class from your modal markup.

No animation modal

##### Modal title

This is a vertically centered modal.

##### Modal title

I will not close if you click outside me. Don't even try to press escape key.

##### Full screen modal

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.

##### Extra large modal

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.

##### Large modal

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.

##### Small modal

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.

##### Modal title

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.