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 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 | |
Code Example
<!-- Modal Trigger Code --><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalDefault">Modal Default</button><!-- Modal Content Code --><div class="modal fade" tabindex="-1" id="modalDefault"> <div class="modal-dialog" role="document"> <div class="modal-content"> <a href="#" class="close" data-bs-dismiss="modal" aria-label="Close"> <em class="icon ni ni-cross"></em> </a> <div class="modal-header"> <h5 class="modal-title">Modal Title</h5> </div> <div class="modal-body"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem similique earum necessitatibus nesciunt! Quia id expedita asperiores voluptatem odit quis fugit sapiente assumenda sunt voluptatibus atque facere autem, omnis explicabo.</p> </div> <div class="modal-footer bg-light"> <span class="sub-text">Modal Footer Text</span> </div> </div> </div></div>
Use-case Modal
Some use-case example of modals that helps in develop your projects.
