Loading. Please Wait.

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults..

Static Example

A rendered modal with header, body, and set of actions in the footer.

Example

Live Demo

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

Optional Sizes

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

Using the Grid System

To take advantage of the Bootstrap grid system within a modal, just nest .rows within the .modal-body and then use the normal grid system classes.

Navbar Options

Header Layout

Sidebar Options

Content View

Footer Options

Main Color

Navbar

Sidebar