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

Basic

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

Launch demo modal

Vertically Centered

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

Launch demo modal

Optional Sizes

Modals have three optional sizes, available via modifier classes to be placed on a .modal-dialog. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.

Extra large modal Large modal Small modal