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

#### Modal Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit nesciunt, cum, vitae nobis laudantium iure, veritatis quod dicta quos voluptas vel a obcaecati voluptatem id? Error fugiat ullam eum, quas in voluptates vitae eos qui, exercitationem reprehenderit commodi facilis veritatis necessitatibus accusantium, dolore perferendis natus. In nulla corporis soluta tenetur?

##### 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.

#### Modal title

#### Text in a modal

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

#### Popover in a modal

This button should trigger a popover on click.

#### Tooltips in a modal

This link and that link should have tooltips on hover.

#### Overflowing text to show scroll behavior

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

##### Optional Sizes

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

#### Modal Large

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem eveniet porro quam magni quos ea officia voluptas voluptatum, praesentium quo temporibus, debitis ipsum dicta reprehenderit autem ab repudiandae excepturi? Tenetur sapiente sequi inventore placeat vel, fugit minus commodi possimus repellendus doloribus, cupiditate nam, ratione quae quia porro sunt veniam? Facilis temporibus officia dolore nihil excepturi, velit enim quam natus possimus esse libero eligendi, ullam quia ab tenetur qui! Autem saepe consequatur unde voluptatum earum nostrum. Dolores fugit nostrum perferendis non quasi pariatur tempore quidem numquam necessitatibus provident rem aut voluptate consequuntur, tenetur, quos saepe ipsum sit optio nulla totam. Non.

#### Modal Small

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem eveniet porro quam magni quos ea officia voluptas voluptatum, praesentium quo temporibus, debitis ipsum dicta reprehenderit autem ab repudiandae excepturi? Tenetur sapiente sequi inventore placeat vel, fugit minus commodi possimus repellendus doloribus, cupiditate nam, ratione quae quia porro sunt veniam?

##### 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.

#### Modal title

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-2 .col-md-offset-4
.col-md-6 .col-md-offset-3
Level 1: .col-sm-9
Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-4 .col-sm-6

Navbar Options

Show/Hide Fixed

Header Layout

Show/Hide

Sidebar Options

Show/Hide
Fixed Aside

Content View

Footer Options

Show/Hide Fixed

Main Color

Primary
Info
Success
Warning
Danger

Navbar

Dark
Light
Like Main Color

Sidebar

Dark
Light
Like Main Color