Modals Component

Modals

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults. Included are the modal header, modal body required for padding, and modal footer optional.

Basic

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

Sizes

Modals have three optional sizes, available via modifier classes to be placed on a .modal-dialog.

Forms

Add forms to the modal plugin like login or registration like in the example below. It can be useful when you would like to display a login form.

Positions

Modal positions can be set with the .modal-*position name class. Add the position name to the modal class.

Variations

Use custom variations for modal component like primary, success or danger etc. Add .modal-*color to the modal class.