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 Reference Details
.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>
.zoom Use 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.