Basic Modal
Toggle a modal via JavaScript by clicking the button above.
Vertically Centered
Add .modal-dialog-centered to .modal-dialog to vertically center the modal.
Disabled Backdrop
You can disable the backdrop by using data-backdrop="false"
Disabled Animation
For modals that simply appear rather than fade in to view, remove the .fade class from your modal markup.
Modal Themes
Use class .bg-* with your .modal-header to change theme of modal
Modal Sizes
Add class .nodal-{xs|sm|lg|xl} with .modalo-dialog to create a modal with size
On Show 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.
On Shown Event
This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete).
On Hide Event
This event is fired immediately when the hide instance method has been called.
On Hidden Event
This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
Form Components
Login Form
Created Simple Login Form.
Scrolling long Content
If your content is longer you the page will autmatically adopt a scrollbar
Scrolling long Content Inside Modal
You can also create a scrollable modal that allows scroll the modal body by adding
.modal-dialog-scrollable to .modal-dialog.