Modal & Notification page header description goes here...


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.

Bootstrap 11 mins ago
Hello, world! This is a toast message.
<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>
Bootstrap 11 mins ago
Hello, world! This is a toast message.
Bootstrap 2 seconds ago
See? Just like this.