Below is a static modal example (meaning its position and display have been overridden). Included are the modal header, modal body (required for padding), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.
The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds .modal-open to the <body> to override default scrolling behavior and generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal.
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content text-center">
<div class="modal-header">
<h5 class="modal-title">Modal Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div><!-- / modal-header -->
<div class="modal-body">
<p>Modal body text goes here.</p>
</div><!-- / modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-dark" data-bs-dismiss="modal"><i class="fas fa-times fs-14 mr-5"></i> <span>Close</span></button>
<button type="button" class="btn btn-sm btn-primary" data-bs-dismiss="modal"><i class="fas fa-check fs-14 mr-5"></i> <span>Save</span></button>
</div><!-- / modal-footer -->
</div><!-- / modal-content -->
</div><!-- / modal-dialog -->
</div><!-- / modal -->Click on nay button to open the modal. All modals are centered on the screen usin the modal-dialog-centered helper class.
<!--default modal -->
<a href="#x" class="btn btn-primary mb-5 mr-10" data-bs-toggle="modal" data-bs-target=".default-modal">Default</a>
<!-- modal -->
<div class="modal fade default-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content text-center">
<div class="modal-header">
<h5 class="modal-title">Default Modal</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div><!-- / modal-header -->
<div class="modal-body">
<p>Modal body text goes here. Quisque a eros porta urna vulputate congue at in dui. Nulla sed sapien a velit vestibulum varius. Cras eu eros nibh commodo.</p>
</div><!-- / modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-dark" data-bs-dismiss="modal"><i class="fas fa-times fs-14 mr-5"></i> <span>Close</span></button>
<button type="button" class="btn btn-sm btn-primary" data-bs-dismiss="modal"><i class="fas fa-check fs-14 mr-5"></i> <span>Save</span></button>
</div><!-- / modal-footer -->
</div><!-- / modal-content -->
</div><!-- / modal-dialog -->
</div><!-- / modal -->
<!-- / default-modal -->