Default Modal

By clicking the button above toggle a modal via JavaScript . You can use modal to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Vertically Centered

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

Modal Themes

Use class .bg-* with your .modal-header to change theme of modal

Modal Sizes

Add class .modal-{sm|lg|xl|full} with .modal-dialog to create a modal with different size.

Modal Without Border

By clicking the button above toggle a Boderless via JavaScript. Use .modal-borderless with .modalfor BorderLess modal.

Disabled Background

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

Scrollable Modal

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

In-Modal Scroller

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

Modal With Login Form

Created Simple Login Form.

Disabled Animation

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

Theme Config

Theme Layout

RTL Layout

Theme Colors