Modals

We have styled all Bootstrap elements just as you want!

Default Bootstrap Modal

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

Static Modals

Click below button to see example of static modal. It will not be closed by clicking on backdrop.

Modal Without backdrop

You can disable backdrop by adding data-backdrop="false" to the modal. By disabling backdrop, modal can not be closed by clicking anywhere else.

Colored Modals

Just add bg-primary for primary colored modal. You can use other color classes like bg-black, bg-success, bg-warning etc.

Transparent Modal

You can customize backdrop color by simply adding data-backdrop-color attribute to .modal. You can use primary, white, danger, black, success etc colors.

Top Aligned

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

Bottom Aligned

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

Full Screen Modal

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

Small Modal

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

Large Modal

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

Sweet Alert

A beautiful replacement for JavaScript alert.

Success Message with animation

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

Warning Modal with confirm & cancel buttons

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