Bootstrap 4 modals are a dialog box/popup window that provides either the most important information to the user or taking important information from the user.
Remember: Modals are built with HTML, CSS, and JavaScript.It has mainly three section namely the header,body and footer.Each has its own role and importance.
General Syntax
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalId">
Open modal
</button>
<div class="modal" tabindex="-1" role="dialog" id="modalId"> </div>
Source Code
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalId">
Open modal
</button>
<div class="modal" tabindex="-1" role="dialog" id="modalId">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<p>Modal body text goes here.</p>
</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>
Try it yourself
Remember:In the above example data attributesdata-toggle="modal"
& data-target="#modalId"
is used inside button
.Assign modal id to the button data attribute (data-target
).
To create modal animation ,use .fade
class to modal container having .modal
class.
General Syntax
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalId">
Open modal
</button>
<div class="modal fade" tabindex="-1" role="dialog" id="modalId"></div>
Source Code
<div class="container text-center my-2">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalId">
Open modal
</button>
</div><!--/container-->
<div class="modal fade" tabindex="-1" role="dialog" id="modalId">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<p>Modal body text goes here.</p>
</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>
Try it yourself
Remember:To animate bootstrap modal,assign.modal
to the modal container having .modal
.
Bootstrap modal size can be controlled by adding .modal-sm
for small modal and .modal-lg
class for large modal to the <div>
that contains .modal-dialog
.
General Syntax
<div class="modal-dialog modal-lg"></div>
<div class="modal-dialog modal-sm"></div>
Source Code
<!-- large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalLargeId">Large Model</button>
<div class="modal fade" tabindex="-1" role="dialog" id="modalLargeId">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<p>Modal body text goes here.</p>
</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>
Try it yourself
Remember:In the above example,.modal-sm
& .modal-lg
is assigned to the the <div>
having .modal-dialog
.
To create modal vertical as well as horizontally center within the page, use .modal-dialog-centered
class to the div that contain class .modal-dialog
General Syntax
<div class="modal-dialog modal-dialog-centered" role="document"></div>
Source Code
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalId">Centered Model</button>
<div class="modal fade" tabindex="-1" role="dialog" id="modalId">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<p>Modal body text goes here.</p>
</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>
Try it yourself
Remember:In the above example,.modal-dialog-centered
is assigned to the the
<div>
having .modal-dialog
.