Overview
Anim
Layout
Forms
Components
Accordion
Alerts
Avatar
Badge
Breadcrumb
Buttons
Button group
Close button
Calendar
Card
Caret
Carousel
Classified
Dropdowns
List
Loader
Modal
Navbar
Nav | Pills
Nav | Tabs
Pagination
Placeholders
Progress
Rating
Scrollbar
Sidenav
Spinners
Tables
Timeline
Toasts
Tooltips
TreeView
Utilities

Toasts

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.

UsageNg Notify

Basic example

...

    <div class="Toast Show" role="alert">
      <div class="Toast-header">
        <div class="Toast-icon"><i class="fa-solid fa-bell"></i></div>
        <strong class="ME-auto">Lootstrap</strong>
        <small>11 min ago</small>
        <button type="button" class="Btn-close" data-ls-dismiss="Toast" aria-label="Close"></button>
      </div>
      <div class="Toast-body">
        Hello, world! This is a toast message.
      </div>
    </div>
Colors

Create different Toast color schemes with .Toast-success, .Toast-info, .Toast-warning, .Toast-danger, .Toast-primary, .Toast-secondary, .Toast-light or .Toast-dark classes. 

    <div class="Row G-1">
      <div class="Col-12 Col-lg-6">
        <div class="Toast Show Toast-success" role="alert">
          <div class="Toast-header">
            <div class="Toast-icon"><i class="fa-solid fa-check"></i></div>
            <strong class="ME-auto">Lootstrap</strong>
            <small>11 min ago</small>
            <button type="button" class="Btn-close" data-ls-dismiss="Toast" aria-label="Close"></button>
          </div>
          <div class="Toast-body">
            Hello, world! This is a Success message.
          </div>
          <div class="Progress" style="height: 3px;">
            <span class="Progress-bar W-66"></span>
          </div>
        </div>
      </div>
      <div class="Col-12 Col-lg-6">
        <div class="Toast Show Toast-danger" role="alert">
          <div class="Toast-header">
            <div class="Toast-icon"><i class="fa-solid fa-circle-xmark"></i></div>
            <strong class="ME-auto">Lootstrap</strong>
            <small>11 min ago</small>
            <button type="button" class="Btn-close" data-ls-dismiss="Toast" aria-label="Close"></button>
          </div>
          <div class="Toast-body">
            Hello, world! This is a Danger message.
          </div>
          <div class="Progress" style="height: 3px;">
            <span class="Progress-bar W-66"></span>
          </div>
        </div>
      </div>
      <div class="Col-12 Col-lg-6">
        <div class="Toast Show Toast-warning" role="alert">
          <div class="Toast-header">
            <div class="Toast-icon"><i class="fa-solid fa-circle-exclamation"></i></div>
            <strong class="ME-auto">Lootstrap</strong>
            <small>11 min ago</small>
            <button type="button" class="Btn-close" data-ls-dismiss="Toast" aria-label="Close"></button>
          </div>
          <div class="Toast-body">
            Hello, world! This is a Warning message.
          </div>
          <div class="Progress" style="height: 3px;">
            <span class="Progress-bar W-66"></span>
          </div>
        </div>
      </div>
      <div class="Col-12 Col-lg-6">
        <div class="Toast Show Toast-info" role="alert">
          <div class="Toast-header">
            <div class="Toast-icon"><i class="fa-solid fa-circle-info"></i></div>
            <strong class="ME-auto">Lootstrap</strong>
            <small>11 min ago</small>
            <button type="button" class="Btn-close" data-ls-dismiss="Toast" aria-label="Close"></button>
          </div>
          <div class="Toast-body">
            Hello, world! This is a Info message.
          </div>
          <div class="Progress" style="height: 3px;">
            <span class="Progress-bar W-66"></span>
          </div>
        </div>
      </div>
    </div>