Notification

Bootstrap 5 Notification

With a toast, a lightweight and easily customized alert message, Bootstrap 5 notifications is used to send information to your visitors.

Toasts are little notifications that are meant to look like the push notifications that have become popular on mobile and desktop platforms. Because they're made with flexbox, they're simple to align and place.

Custom Notification Types

Contrast11 mins ago

Hello, world! This is a primary message.

Contrast11 mins ago

Hello, world! This is a primary message.

Contrast11 mins ago

Hello, world! This is a primary message.

HTML

html

<div class="notification mb-3" id="dismiss1">
  <div class="notification-header">
    <div class="icon-box"><i class="fa fa-square"></i></div>
    <div class="d-flex flex-column">
      <strong class="ms-3">Contrast</strong>
      <small class="ms-3 small-text">11 mins ago</small>
    </div>
    <button type="button" class="btn p-0 ms-auto h-25">
      <button class="btn-close btn-close1" data-bs-dismiss="toast"></button>
    </button>
    <div class="toggle">
      <span
        data-bs-toggle="collapse"
        data-bs-target="#collapseOne"
        aria-expanded="true"
        aria-controls="collapseOne"
      ></span>
    </div>
  </div>
  <div class="notification-message" id="collapseOne">
    Hello, world! This is a dismissible message.
  </div>
</div>

<div class="notification" id="dismiss2">
  <div class="notification-header">
    <div class="icon-box"><i class="fa fa-square"></i></div>
    <div class="d-flex flex-column">
      <strong class="ms-3">Contrast</strong>
      <small class="ms-3 small-text">11 mins ago</small>
    </div>
    <button type="button" class="btn p-0 ms-auto h-25">
      <button class="btn-close" data-bs-dismiss="toast"></button>
    </button>
    <div class="toggle">
      <span
        data-bs-toggle="collapse"
        data-bs-target="#collapseOne"
        aria-expanded="true"
        aria-controls="collapseOne"
      ></span>
    </div>
  </div>
  <div class="notification-message" id="collapseOne">
    Hello, world! This message will dissapear in 5 seconds.
  </div>
</div>

Icon Box Color

Contrast11 mins ago

Hello, world! This is a primary message.

Contrast11 mins ago

Hello, world! This is a primary message.

Contrast11 mins ago

Hello, world! This is a primary message.

HTML

html

<div class="notification mb-3">
  <div class="notification-header">
    <div class="icon-box bg-info">
      <i class="fa fa-square text-white"></i>
    </div>
    <div class="d-flex flex-column">
      <strong class="ms-3">Contrast</strong>
      <small class="ms-3 small-text">11 mins ago</small>
    </div>
    <button type="button" class="btn p-0 ms-auto h-25">
      <button class="btn-close" data-bs-dismiss="toast"></button>
    </button>
    <div class="toggle">
      <span
        data-bs-toggle="collapse"
        data-bs-target="#collapseTwo"
        aria-expanded="true"
        aria-controls="collapseTwo"
      ></span>
    </div>
  </div>
  <div class="notification-message" id="collapseTwo">
    Hello, world! This is a primary message.
  </div>
</div>

<div class="notification mb-3">
  <div class="notification-header">
    <div class="icon-box bg-danger">
      <i class="fa fa-square text-white"></i>
    </div>
    <div class="d-flex flex-column">
      <strong class="ms-3">Contrast</strong>
      <small class="ms-3 small-text">11 mins ago</small>
    </div>
    <button type="button" class="btn p-0 ms-auto h-25">
      <button class="btn-close" data-bs-dismiss="toast"></button>
    </button>
    <div class="toggle">
      <span
        data-bs-toggle="collapse"
        data-bs-target="#collapseThree"
        aria-expanded="true"
        aria-controls="collapseThree"
      ></span>
    </div>
  </div>
  <div class="notification-message" id="collapseThree">
    Hello, world! This is a primary message.
  </div>
</div>

<div class="notification mb-3">
  <div class="notification-header">
    <div class="icon-box bg-secondary">
      <i class="fa fa-square text-white"></i>
    </div>
    <div class="d-flex flex-column">
      <strong class="ms-3">Contrast</strong>
      <small class="ms-3 small-text">11 mins ago</small>
    </div>
    <button type="button" class="btn p-0 ms-auto h-25">
      <button class="btn-close" data-bs-dismiss="toast"></button>
    </button>
    <div class="toggle">
      <span
        data-bs-toggle="collapse"
        data-bs-target="#collapseFour"
        aria-expanded="true"
        aria-controls="collapseFour"
      ></span>
    </div>
  </div>
  <div class="notification-message" id="collapseFour">
    Hello, world! This is a primary message.
  </div>
</div>

Notification with Icons

Contrast11 mins ago

Hello, world! This is a primary message.

Contrast11 mins ago

Hello, world! This is a primary message.

Contrast11 mins ago

Hello, world! This is a primary message.

Contrast11 mins ago

Hello, world! This is a primary message.

HTML

html

<div class="notification mb-3">
  <div class="notification-header">
    <div class="icon-box bg-dark">
      <i class="fa fa-cut text-white"></i>
    </div>
    <div class="d-flex flex-column">
      <strong class="ms-3">Contrast</strong>
      <small class="ms-3 small-text">11 mins ago</small>
    </div>
    <button type="button" class="btn p-0 ms-auto h-25">
      <button class="btn-close" data-bs-dismiss="toast"></button>
    </button>
    <div class="toggle">
      <span
        data-bs-toggle="collapse"
        data-bs-target="#collapseFive"
        aria-expanded="true"
        aria-controls="collapseFive"
      ></span>
    </div>
  </div>
  <div class="notification-message" id="collapseFive">
    Hello, world! This is a primary message.
  </div>
</div>

<div class="notification mb-3">
  <div class="notification-header">
    <div class="icon-box bg-dark">
      <i class="fa fa-car text-primary"></i>
    </div>
    <div class="d-flex flex-column">
      <strong class="ms-3">Contrast</strong>
      <small class="ms-3 small-text">11 mins ago</small>
    </div>
    <button type="button" class="btn p-0 ms-auto h-25">
      <button class="btn-close" data-bs-dismiss="toast"></button>
    </button>
    <div class="toggle">
      <span
        data-bs-toggle="collapse"
        data-bs-target="#collapseSix"
        aria-expanded="true"
        aria-controls="collapseSix"
      ></span>
    </div>
  </div>
  <div class="notification-message" id="collapseSix">
    Hello, world! This is a primary message.
  </div>
</div>

<div class="notification mb-3">
  <div class="notification-header">
    <div class="icon-box bg-dark">
      <i class="fa fa-compass text-danger"></i>
    </div>
    <div class="d-flex flex-column">
      <strong class="ms-3">Contrast</strong>
      <small class="ms-3 small-text">11 mins ago</small>
    </div>
    <button type="button" class="btn p-0 ms-auto h-25">
      <button class="btn-close" data-bs-dismiss="toast"></button>
    </button>
    <div class="toggle">
      <span
        data-bs-toggle="collapse"
        data-bs-target="#collapseSeven"
        aria-expanded="true"
        aria-controls="collapseSeven"
      ></span>
    </div>
  </div>
  <div class="notification-message" id="collapseSeven">
    Hello, world! This is a primary message.
  </div>
</div>

<div class="notification mb-3">
  <div class="notification-header">
    <div class="icon-box bg-dark">
      <i class="fa fa-train text-success"></i>
    </div>
    <div class="d-flex flex-column">
      <strong class="ms-3">Contrast</strong>
      <small class="ms-3 small-text">11 mins ago</small>
    </div>
    <button type="button" class="btn p-0 ms-auto h-25">
      <button class="btn-close" data-bs-dismiss="toast"></button>
    </button>
    <div class="toggle">
      <span
        data-bs-toggle="collapse"
        data-bs-target="#collapseEight"
        aria-expanded="true"
        aria-controls="collapseEight"
      ></span>
    </div>
  </div>
  <div class="notification-message" id="collapseEight">
    Hello, world! This is a primary message.
  </div>
</div>

JavaScript

js

<script src="../build/cdbbootstrap.js"></script>
    <script>
      var toastElList = [].slice.call(
        document.querySelectorAll('.notification'),
      );
      var toastList = toastElList.map(function (toastEl) {
        return new CDB.Notification(toastEl, { sticky: true });
      });

      const notificationId = document.querySelector('#dismiss1');
      const notification1 = new CDB.Notification(notificationId, {
        sticky: true,
        visibleDuration: 2000,
      });
      const notificationId2 = document.querySelector('#dismiss2');
      const notification2 = new CDB.Notification(notificationId2, {
        sticky: false,
        visibleDuration: 2000,
      });
    </script>

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.