BS5 Modal
Bootstrap 5 Modal
A dialog box or popup window that appears on top of the current page is the Modal component:
==== button mukavu ====
How To Create a Modal
The example that follows demonstrates how to make a simple modal:
Example
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Add animation
To add a fading effect as the modal opens and closes, use the .fade class:
Example
<!-- Fading modal -->
<div class="modal fade"></div>
<!-- Modal without animation -->
<div class="modal"></div>
Modal Size
To modify the modal’s size, append the .modal-sm, .modal-lg, or .modal-xl classes, depending on whether the modal is tiny, large, or extra large.
To the <div> element, apply the size class using class .modal-dialog:
Small Modal
<div class="modal-dialog modal-sm">
Large Modal
<div class="modal-dialog modal-lg">
Extra Large Modal
<div class="modal-dialog modal-xl">
Modals have a “medium” size by default.
Fullscreen Modals
Use the .modal-fullscreen class if you want the modal to fill the entire width and height of the page:
Example
<div class="modal-dialog modal-fullscreen">
Responsive Fullscreen Modals
With the help of the .modal-fullscreen-*-* classes, you can additionally decide when the modal should be fullscreen:
Centered Modal
Using the .modal-dialog-centered class, center the modal both horizontally and vertically within the page:
Example
<div class="modal-dialog modal-dialog-centered">
Scrolling Modal
The website gets a scrollbar when there is a lot of content inside the modal. Examine the following instances to comprehend it:
Example
<div class="modal-dialog">
However, by appending .modal-dialog-scrollable to .modal-dialog, it is feasible to only scroll within the modal and not the page itself:
Example
<div class="modal-dialog modal-dialog-scrollable">
