Bootstrap modals are a dialog box/popup window that displays information or takes information from the user.
Steps to create bootstrap model:
.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.
General Syntax
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal" id="staticBackdrop" data-bs-backdrop="static" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>This is model body content.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
To create modal animation ,use .fade
class to modal container that has contains class .modal
.
General Syntax
<!-- Fading modal -->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>This is model body content.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
To create scrollable modal, add .modal-dialog-scrollable
to the .modal-dialog
.
General Syntax
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop2">
Launch static backdrop modal with scrollbar
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop2" data-bs-backdrop="static" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>This is model body content.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
To create vertically centred modal,add .modal-dialog-centered
to the .modal-dialog
.
General Syntax
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop3">
Launch static backdrop modal with scrollbar
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop3" data-bs-backdrop="static" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>This is model body content section.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
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
.
General Syntax
<div class="modal-dialog modal-sm"></div>
<div class="modal-dialog modal-lg"></div>
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
.
General Syntax
<div class="modal-dialog modal-dialog-centered"> </div>
Note: Centered modal can be created by assigning .modal-dialog-centered
class to the <div>
that contain class .modal-dialog
.