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.

Dashboard

Notifications 24 New

Quick Actions

Profile

Sales Stats
HTML 5 Templates
Font-end,Admin & Email
+79%
Wordpress Themes
eCommerce Website, Plugin
+21%
eCommerce Websites
Shops, Fasion wep sites & atc
-16%
UI/UX Design
Evrything you ever imagine
+4%
Top Products
Circle Desige
UI/UX, Animation, Design
$ 2,830
Clip Code
PHP, NET, Python, Ruby
$ 4,975
JS-Nijas
jQuery, AngularJS, Recct
$ 3.594
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
Buy Keen Now!