Modals - Apex responsive bootstrap 4 admin template

Modals

Basic Modals

Default Modal

Toggle a modal via JavaScript by clicking the button above.

Modal With Icons

With some icons and success alert to give success message.

Disable Keyboard

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

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.

Modal Show

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

Disable Animation

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

Modal Themes

Primary Modal Template

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

Success Modal Template

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

Danger Modal Template

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

Info Modal Template

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

Warning Modal Template

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

Border Modal Template

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

Modal Sizes

Small Modal Size

Add class .modal-smwith .modal-dialogto use small size of modal.

Default Modal Size

Default size modal markup doesn't require any additional sizing class.

Large Modal

Add class .modal-lgwith .modal-dialogto use large size of modal.

Extra Large Modal

Add class .modal-xlto use extra large size of modal.

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.

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.

OnHide Modal Event

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

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 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

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

Elizabeth Elliott

Mary Adams

Caleb Richards

June Lane

Edward Fletcher

Crystal Bates

Nathan Watts

Willard Wood

Ronnie Ellis

Gwendolyn Wood

Daniel Russell

Sarah Graves

Andrew Hoffman

Camila Lynch

Theme Customizer

Layout Options

Sidebar Color Options

Background Colors

Sidebar Bg Image

Background Images