Note: Our system is based on the Bootstrap toolkit. The contents of this page are a simplified version of Bootstrap's extensive documentation.
Note: The markup that can be copied to your clipboard from this page is utilizing the latest Bootstrap 5.2.2 library markup. If your project is currently using the previous Bootstrap 4.6.2 library, you must replace any "data-bs-" attribute with "data-". The "-bs" attribute addition applies to Boostrap 5.2.2 only so as to not collide with other Javascript frameworks that may also utilize "data" attributes.
<!-- LAUNCH WITH ANCHOR -->
<a href="javascript:void(0);" target="_self" data-bs-toggle="modal" data-bs-target="#modalID">Text</a>
<!-- LAUNCH WITH BUTTON -->
<button type="button" class="btn btn-default" data-bs-toggle="modal" data-bs-target="#modalID">Text</button>
<!-- MODAL START | MODAL ---------------------------------------------------------------------------------------------------- -->
<div class="modal fade" id="modalID" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<p class="modal-title" id="modalLabel">Modal Title</p>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col">
<p>Text...</p>
</div>
</div>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-12 col-sm-3 order-2 order-sm-1">
<div class="panel-btn-left">
<p><a href="javascript:void(0);" target="_self" class="btn btn-default" role="button" data-bs-dismiss="modal">Cancel</a></p>
</div>
</div>
<div class="col-12 col-sm-9 order-1 order-sm-2">
<div class="panel-btn-right">
<p><a href="javascript:void(0);" target="_self" class="btn btn-primary" role="button">Save</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- MODAL END | MODAL ---------------------------------------------------------------------------------------------------- -->
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal">...</div>
<div class="modal-dialog modal-sm">...</div>
<!-- MODAL INFO -->
<div class="modal-content modal-info">
<div class="modal-header">
<p class="modal-title" id="modalLabel"><i class="fa-solid fa-circle-info"></i> Modal Title</p>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
</div>
<!-- MODAL SUCCESS -->
<div class="modal-content modal-success">
<div class="modal-header">
<p class="modal-title" id="modalLabel"><i class="fa-solid fa-check-circle"></i> Modal Title</p>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
</div>
<!-- MODAL WARNING -->
<div class="modal-content modal-warning">
<div class="modal-header">
<p class="modal-title" id="modalLabel"><i class="fa-solid fa-exclamation-triangle"></i> Modal Title</p>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
</div>
<!-- MODAL DANGER -->
<div class="modal-content modal-danger">
<div class="modal-header">
<p class="modal-title" id="modalLabel"><i class="fa-solid fa-exclamation-circle"></i> Modal Title</p>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
</div>