Elements:Modals
Modals are useful for displaying messages or content to users when they perform a certain action.
Setup
Modals are hidden by default and should be embed in your page using the following markup:
<div class="modal fade z-0">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
Modal title
</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal 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">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->Working Modal Example
Modal Vertically Centered
Add
.modal-dialog-centered
to
.modal-dialog
to vertically center the modal.
Modal static backdrop
Scrolling long content
Add the class
.modal-dialog-scrollable
to the
.modal-dialog
elememt.
Toggle between modals
Open first modalModal Sizing
Add
.modal-sm
or
.modal-lg
classes to the
modal-dialog
element to alter the size of the modals.
Fullscreen Modal
Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a
.modal-dialog
.
| Class | Availability |
|---|---|
.modal-fullscreen
|
Always |
.modal-fullscreen-sm-down
|
Below
576px
|
.modal-fullscreen-md-down
|
Below
768px
|
.modal-fullscreen-lg-down
|
Below
992px
|
.modal-fullscreen-xl-down
|
Below
1200px
|
.modal-fullscreen-xxl-down
|
Below
1400px
|
Dismissing Modals
To allow users to dismiss a modal add a link or button with the attribute
data-bs-dismiss="modal"
within the modal.
Timed Modals
To allow a modal to be opened for a specific duration (in milliseconds) and then have it close itself simply add a
data-modal-duration="DURATION-IN-MILLISECONDS"
attribute to the
.modal
element.