##### Switcher

Basic Modal

###### Modal title

...
Static backdrop

###### Modal title

I will not close if you click outside me. Don't even try to press escape key.

Scrolling long content

###### Modal title

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero ipsum quasi, error quibusdam debitis maiores hic eum? Vitae nisi ipsa maiores fugiat deleniti quis reiciendis veritatis.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea voluptatibus, ipsam quo est rerum modi quos expedita facere, ex tempore fuga similique ipsa blanditiis et accusamus temporibus commodi voluptas! Nobis veniam illo architecto expedita quam ratione quaerat omnis. In, recusandae eos! Pariatur, deleniti quis ad nemo ipsam officia temporibus, doloribus fuga asperiores ratione distinctio velit alias hic modi praesentium aperiam officiis eaque, accusamus aut. Accusantium assumenda, commodi nulla provident asperiores fugit inventore iste amet aut placeat consequatur reprehenderit. Ratione tenetur eligendi, quis aperiam dolores magni iusto distinctio voluptatibus minus a unde at! Consequatur voluptatum in eaque obcaecati, impedit accusantium ea soluta, excepturi, quasi quia commodi blanditiis? Qui blanditiis iusto corrupti necessitatibus dolorem fugiat consequuntur quod quo veniam? Labore dignissimos reiciendis accusamus recusandae est consequuntur iure.

Lorem ipsum dolor sit amet.

Vertically centered modal

###### Modal title

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero ipsum quasi, error quibusdam debitis maiores hic eum? Vitae nisi ipsa maiores fugiat deleniti quis reiciendis veritatis.

Vertical Centered Scrollable

###### Modal title

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea voluptatibus, ipsam quo est rerum modi quos expedita facere, ex tempore fuga similique ipsa blanditiis et accusamus temporibus commodi voluptas! Nobis veniam illo architecto expedita quam ratione quaerat omnis. In, recusandae eos! Pariatur, deleniti quis ad nemo ipsam officia temporibus, doloribus fuga asperiores ratione distinctio velit alias hic modi praesentium aperiam officiis eaque, accusamus aut. Accusantium assumenda, commodi nulla provident asperiores fugit inventore iste amet aut placeat consequatur reprehenderit. Ratione tenetur eligendi, quis aperiam dolores magni iusto distinctio voluptatibus minus a unde at! Consequatur voluptatum in eaque obcaecati, impedit accusantium ea soluta, excepturi, quasi quia commodi blanditiis? Qui blanditiis iusto corrupti necessitatibus dolorem fugiat consequuntur quod quo veniam? Labore dignissimos reiciendis accusamus recusandae est consequuntur iure.

Lorem ipsum dolor sit amet.

Tooltips and popovers

###### Modal title

##### Popover in a modal

This button triggers a popover on click.

##### Tooltips in a modal

This link and that link have tooltips on hover.

Using the grid

###### Modal title

.col-md-4
.col-md-4 .ms-auto
.col-md-3 .ms-auto
.col-md-2 .ms-auto
.col-md-6 .ms-auto
Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
Toggle between modals
Open first modal

###### Modal 1

Show a second modal and hide this one with the button below.

###### Modal 2

Hide this modal and show the first with the button below.
Optional sizes

###### Extra large modal

...

###### Large modal

...

###### Small modal

...
Fullscreen modal

###### Full screen modal

...

###### Full screen below sm

...

###### Full screen below md

...

###### Full screen below lg

...

###### Full screen below xl

...

###### Full screen below xxl

...
Varying modal content

###### New message

Recipient:
Message:
Modal Animation Effects
Scale
Slide In Right
Slide In Bottom
Newspaper
Fall
Flip Horizontal
Flip Vertical
Super Scaled
Sign
Rotate Bottom
Rotate Left

###### Message Preview

###### Why We Use Electoral College, Not Popular Vote

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

###### Close Buttons:

Basic Close
Disabel state
White variant

Are You Looking For...

People Pages Articles Tags

Recent Search :

Notifications
Alerts
Mail