Modal

Home
Components
Modal

Basic Modals

Default Modal

Toggle a modal via JavaScript by clicking the button above.

Basic Modal

Check First Paragraph

Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie chocolate cake liquorice. Apple pie sugar plum powder donut soufflé.

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Cupcake sugar plum dessert tart powder chocolate fruitcake jelly. Tootsie roll bonbon toffee danish. Biscuit sweet cake gummies danish. Tootsie roll cotton candy tiramisu lollipop candy cookie biscuit pie.

Modal With Icons

With some icons and success alert to give success message.

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Well done! You successfully read this important alert message.

Disable Keyboard

By Default, closes the modal when escape key is pressed. Disable keyboard interaction using data-backdrop="false".

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Disable Backdrop

Disable backdrop element using data-backdrop="false", it includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on outsidedata-backdrop="false" click.

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Modal Show

Manually opens a modal. Returns to the caller before the modal has actually been shown.

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Disable Animation

For modals that simply appear rather than fade in to view, remove the .fade class from your modal markup.

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Well done! You successfully read this important alert message.

Modal Themes

Primary Modal Template

To use primary modal theme, add .bg-primary class to the .modal-header container

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Success Modal Template

To use success modal theme, add .bg-success class to the .modal-header container

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Well done! You successfully read this important alert message.

Danger Modal Template

To use danger modal theme, add .bg-danger class to the .modal-header container

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Info Modal Template

To use info modal theme, add .bg-info class to the .modal-header container

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Warning Modal Template

To use warning modal theme, add .bg-warning class to the .modal-header container

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Well done! You successfully read this important alert message.

Border Modal Template

To use Border color modal theme, add .border-COLORNAME class to the .modal-content container

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Well done! You successfully read this important alert message.

Modal Sizes

Extra Small Modal Size

Add class .modal-xs with .modal-dialog to use Extra Small size of modal.

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Small Modal Size

Add class .modal-sm with .modal-dialog to use small size of modal.

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Default Modal Size

For default size, modal markup doesn't require any additional sizing class.

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Well done! You successfully read this important alert message.

Large Modal

Add class .modal-lg with .modal-dialog to use large size of modal.

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Extra Large Modal

Add class .modal-xl with .modal-dialog to use extra large size of modal.

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Modal Events

Bootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself

OnShow Modal Event

This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

OnShown Modal Event

This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

OnHide Modal Event

This event is fired immediately when the hide instance method has been called.

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Well done! You successfully read this important alert message.

OnHidden Modal Event

This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Form Components

Login Form

Created Simple Login Form.

Inline Login Form

Email:

Password:

Form with Icons

Modal Title

Email:

Password:

Bootstrap Input Style Form

Bootstrap Form using Floating Label fields.

Modal Title

Email Address

Password

Description

Modal

Basic Modals

Default Modal

Modal With Icons

Disable Keyboard

Disable Backdrop

Modal Show

Disable Animation

Primary Modal Template

Success Modal Template

Danger Modal Template

Info Modal Template

Warning Modal Template

Border Modal Template

Extra Small Modal Size

Small Modal Size

Default Modal Size

Large Modal

Extra Large Modal

OnShow Modal Event

OnShown Modal Event

OnHide Modal Event

OnHidden Modal Event

Form Components

Login Form

Form with Icons

Bootstrap Input Style Form

Theme Customizer

Layout Options

Navigation Color Options

Solid

Gradient

Solid

Gradient

Menu Color Options

You have new order!

99% Server load

Warning notifixation

Complete the task

Generate monthly report

Margaret Govan

Bret Lezama

Carie Berra

Eric Alsobrook

Modal

Basic Modals

Default Modal

Modal With Icons

Disable Keyboard

Disable Backdrop

Modal Show

Disable Animation

Modal Themes

Primary Modal Template

Success Modal Template

Danger Modal Template

Info Modal Template

Warning Modal Template

Border Modal Template

Modal Sizes

Extra Small Modal Size

Small Modal Size

Default Modal Size

Large Modal

Extra Large Modal

Modal Events

OnShow Modal Event

OnShown Modal Event

OnHide Modal Event

OnHidden Modal Event

Form Components

Login Form

Form with Icons

Bootstrap Input Style Form

Theme Customizer

Layout Options

Navigation Color Options

Solid

Gradient

Solid

Gradient

Menu Color Options