Modal

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

Live demo

Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.

Scrolling long content

When modals become too long for the user’s viewport or device, they scroll independent of the page itself.

You can also create a scrollable modal that allows scroll the modal body by adding .modal-dialog-scrollable to .modal-dialog.

Vertically centered

Add .modal-dialog-centered to .modal-dialog to vertically center the modal.

Varying modal content

Have a bunch of buttons that all trigger the same modal with slightly different contents? Use event.relatedTarget and HTML data-* attributes (possibly via jQuery) to vary the contents of the modal depending on which button was clicked.

Optional sizes

Modals have three optional sizes. Add .modal-sm, .modal-lg or .modal-xl to .modal-dialog for additional sizes.