Modal & Notification page header description goes here...
Modal
Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content. Please read the official Bootstrap documentation for the full list of options.
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">MODAL TITLE</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-outline-theme">Save changes</button>
</div>
</div>
</div>
</div>Modal Sizes
Modals have three optional sizes, available via modifier classes to be placed on a .modal-dialog. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
<!-- modal-xl -->
<button type="button" class="btn btn-outline-theme me-2" data-bs-toggle="modal" data-bs-target="#modalXl">Extra large modal</button>
<div class="modal fade" id="modalXl">
<div class="modal-dialog modal-xl">
<div class="modal-content">
...
</div>
</div>
</div>
<!-- modal-lg -->
<button type="button" class="btn btn-outline-theme me-2" data-bs-toggle="modal" data-bs-target="#modalLg">Large modal</button>
<div class="modal fade" id="modalLg">
<div class="modal-dialog modal-lg">
<div class="modal-content">
...
</div>
</div>
</div>
<!-- modal-sm -->
<button type="button" class="btn btn-outline-theme me-2" data-bs-toggle="modal" data-bs-target="#modalSm">Small modal</button>
<div class="modal fade" id="modalSm">
<div class="modal-dialog modal-sm">
<div class="modal-content">
...
</div>
</div>
</div>Modal Cover
Modal cover is an extended feature from Bootstrap modal. It provide the same background color as the modal content. Place a .modal-cover css class on .modal for full cover modal.
<button type="button" class="btn btn-outline-theme me-2" data-bs-toggle="modal" data-bs-target="#modalCoverExample">Modal Cover</button>
<div class="modal modal-cover fade" id="modalCoverExample">
<div class="modal-dialog">
<div class="modal-content">
...
</div>
</div>
</div>Toasts Notification
Push notifications to your visitors with a toast, a lightweight and easily customizable alert message. Please read the official Bootstrap documentation for the full list of options.
<div class="toast" data-autohide="false">
<div class="toast-header">
<i class="far fa-bell text-muted me-2"></i>
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
<script>
$('.toast').toast('show');
</script>Toasts Container
Toasts container is an extended ui from Bootstrap toasts. Wrap the toasts with .toasts-container will allow toast to float within the right top position.
<div class="toasts-container">
<div class="toast fade hide" data-autohide="false" id="toast-1">
...
</div>
<div class="toast fade hide" data-autohide="false" id="toast-1">
...
</div>
</div>