logologo-dark
AB

Modals

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Base Examples

Following are basic example of modals, just toggle a working modal demo by clicking the buttons below.

Class ReferenceDetails
.modal-{sm|lg|xl}Use with .modal-dialog for modal size.
eg. <div class="modal-dialog modal-lg">......</div>
.modal-dialog-{top|bottom}Use with .modal-dialog for modal position.
eg. <div class="modal-dialog modal-dialog-top">......</div>
.modal-body-{sm|md|lg}Use with .modal-body for modal inside gap.
eg. <div class="modal-body modal-body-lg">......</div>
.zoomUse with .modal for zoom effect.
eg. <div class="modal fade zoom">...</div>

Additionaly supported .modal-header-sm for .modal-header & .modal-footer-sm for .modal-footer class.

Code Example

Use-case Modal

Some use-case example of modals that helps in develop your projects.

Switch Demo Layout
Use Case Concept
Preview Settings
Direction Change
LTR Mode
RTL Mode
Main UI Style
Default
Softy
Sidebar Style
White
Light
Dark
Theme
Nav Sidebar Style
White
Light
Dark
Theme
Primary Skin
Default
Blue Light
Egyptian
Purple
Blue
Red
Skin Mode
Light Skin
Dark Skin
Looking for functional script for Investment Platform? Check out
Investorm
Looking for Advanced
Investment Platform?