Basic Examples

Modal components

Live demo

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

Scrollable modal

When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.

Scrolling body content

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

Scrolling inner content

When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.

Vertically centered

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

Tooltips and popovers

Tooltips and popovers can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.

Using the grid

Utilize the Bootstrap grid system within a modal by nesting .container-fluid within the .modal-body. Then, use the normal grid system classes as you would anywhere else.

Static backdrop

Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.

Optional sizes

Modals have two optional sizes, available via modifier classes to be placed on a .modal-dialog. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.

Quick Actions

Lorem Ipsum is simply dummy text of the printing and typesetting simply dummy text of the printing industry.
Lorem Ipsum is simply dummy text of the printing and typesetting simply dummy text of the printing industry.
Lorem Ipsum is simply dummy text of the printing and typesetting simply dummy text of the printing industry.
Lorem Ipsum is simply dummy text of the printing and typesetting simply dummy text of the printing industry.
Lorem Ipsum is simply dummy text of the printing and typesetting simply dummy text of the printing industry.
Notifications
Orders
Customers

Select A Demo

Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Buy Keen Now!