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.
