Bootstrap 5 modals are a dialog box/popup window that display information or taking information from the user.
Steps to create bootstrap 5 modals:
.modal
and data attribute data-bs-backdrop="static"
.modal-dialog
to the immediate child of modal container.
.modal-content
to the immediate child of element(<div>) having .modal-dialog
.
.modal-content
element consist of modal header, body and footer.
.modal-header
.Model title is defined by .modal-title
.Put close button inside modal header and assign .btn-close
and add data attribute data-bs-dismiss="modal"
to the button.
.modal-body
.modal-footer
and it has consist of close button and other links.data-bs-target="#modalId"
.Add other data attribute data-bs-toggle="modal"
to the button.
Let us understand bootstrap modal concept with the help of an example.
Note:Follow the above mention concept to create a bootstrap model.
To create modal animation ,use .fade
class to modal container that has contains class .modal
.
Note:Follow the above mention concept to create a bootstrap animated model.
To create scrollable modal,add .modal-dialog-scrollable
to the .modal-dialog
.
Note:Follow the above mention concept to create a bootstrap model scrollbar.
To create vertically centred modal,add .modal-dialog-centered
to the .modal-dialog
.
Note:Follow the above mention concept to create a bootstrap centered model with scrollbar.
Bootstrap modal size can be controlled by adding .modal-sm
for small modal size and .modal-lg
class for large modal size to the <div>
that contains class .modal-dialog
.
Note:
To create small modal size assign.modal-sm
to the <div>
having class .modal-dialog
while to create large modal assign .modal-lg
to the <div>
having class .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
.
Note: Centered modal can be created by assigning .modal-dialog-centered
class to the <div>
that contain class .modal-dialog
.