Bootstrap 4 modal is a dialog box/popup window that provides either the most important information to the user or taking important information from the user.
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.
Remember:In the above example data attributes data-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.
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
.
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
Remember:In the above example,.modal-dialog-centered
is assigned to the the
<div>
having .modal-dialog
.