Basic Modal

Toggle a modal via JavaScript by clicking the button above.

Vertically Centered

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

Disabled Backdrop

You can disable the backdrop by using data-backdrop="false"

Disabled Animation

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

Form Components

Login Form

Created Simple Login Form.

Scrolling long Content

If your content is longer you the page will autmatically adopt a scrollbar

Scrolling long Content Inside Modal

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