Basic Modal

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 Modal

When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.

Vertically centered

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

Large modal

Modals have two 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.

Small modal

Modals have two 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

Modals have two optional sizes, available via modifier classes to be placed on a .modal-dialog.Just add .modal-xl class on .modal-dialog