Modal
Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Open Bootstrap DocsExample
<!-- Button trigger modal -->
<button type="button" class="btn btn-block btn-light" data-toggle="modal" data-target="#modal_1">
Default modal
</button>
<!-- Modal -->
<div class="modal modal-fluid fade" id="modal_1" tabindex="-1" role="dialog" aria-labelledby="modal_1" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="row justify-content-center">
<div class="col-lg-8 text-center py-4">
<h4 class="heading h3">Unleash your creativity!</h4>
<p class="lead text-muted">
You can easy create stackable modal boxes. For example, your inline content or Ajax response can contain a gallery:
</p>
<div class="py-md">
<img src="../html/assets/images/image-gallery/1.jpg" class="img-fluid img-center">
</div>
<button type="button" class="btn btn-primary" data-dismiss="modal">Let's do this!</button>
</div>
</div>
</div>
</div>
</div>
</div>Variations
Additional Class Reference
.modal-fluid- Apply to
.modalto remove vertical margins
.modal-lg- Apply to
.modal-dialogto increase modal's size
.modal-sm- Apply to
.modal-dialogto decrease modal's size
<!-- Button trigger modal -->
<button type="button" class="btn btn-block 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" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" 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="fa fa-exclamation-circle fa-4x"></i>
<h4 class="heading mt-4">Should we stop now?</h4>
<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-secondary" data-dismiss="modal">Probably not</button>
</div>
</div>
</div>
</div>Additional Class Reference
You can see all the background options in the dedicated page which can be found here.
.modal-{color}- Apply to
.modalto change the background and text colors