Modal
Use this modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Basic
Show code
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>Options
Colors
Use .modal-COLOR, where color is one the the pre-defined theme values: info, success, danger, warning, primary, secondary, white and dark
Show code
<!-- Button trigger modal -->
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#modal_5">
Danger modal
</button>
<!-- Modal -->
<div class="modal modal-danger fade" id="modal_5" tabindex="-1" role="dialog" aria-labelledby="modal_5" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h6" id="modal_title_6">This is way to dangerous</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="py-3 text-center">
<i class="fas fa-exclamation-circle fa-4x"></i>
<h5 class="heading h4 mt-4">Should we stop now?</h5>
<p>
You can easy create stackable modal boxes. For example, your inline content or Ajax response can contain a gallery:
</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-white" data-dismiss="modal">Probably not</button>
</div>
</div>
</div>
</div>
Show code
<!-- Button trigger modal -->
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#modal_success">
Success modal
</button>
<!-- Modal -->
<div class="modal modal-success fade" id="modal_success" tabindex="-1" role="dialog" aria-labelledby="modal_success" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h6" id="modal_title_6">It looks ok to me</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="py-3 text-center">
<i class="fas fa-exclamation-circle fa-4x"></i>
<h5 class="heading h4 mt-4">Let's get started</h5>
<p>
You can easy create stackable modal boxes. For example, your inline content or Ajax response can contain a gallery:
</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-white" data-dismiss="modal">OK, cool</button>
</div>
</div>
</div>
</div>Sizing
Modals have three optional sizes, available via modifier classes to be placed on a .modal-dialog. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
Show code
<!-- Extra large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".docs-example-modal-xl">Extra large modal</button>
<div class="modal fade docs-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h6" id="myExtraLargeModalLabel">Extra large modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
Show code
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".docs-example-modal-lg">Large modal</button>
<div class="modal fade docs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h6" id="myLargeModalLabel">Large modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
Show code
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".docs-example-modal-sm">Small modal</button>
<div class="modal fade docs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h6" id="mySmallModalLabel">Small modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>