Toast Notifications

You can alter toast notification look and behaviour via flexible data API data-toast-*:

'type' = 'none' (default) / 'info' / 'success' / 'warning' / 'danger' - To alter look of the toast.
'icon' = 'fe-icon-heart' - Use class of built-in Feather icons or any othe icon pack you use.
'position' = 'topRight' / 'topCenter' / 'bottomRight' / 'bottomCenter' / 'bottomLeft' / 'topLeft' - Where the toast notification appears on the page.
'title' = '' (string) - Toast notification title.
'message' = '' (string) - Toast notification message.

HTML
Pug

<!-- Primary Toast -->
<div class="iziToast iziToast-primary">
  <div class="iziToast-body" style="padding-left: 33px;">
    <i class="iziToast-icon fe-icon-bell"></i>
    <strong>Primary</strong>
    <p>toast notification with icon</p>
  </div>
  <button class="iziToast-close"></button>
</div>

<!-- Secondary Toast No Icon -->
<div class="iziToast">
  <div class="iziToast-body">
    <strong>Secondary</strong>
    <p>toast notification without icon</p>
  </div>
  <button class="iziToast-close"></button>
</div>

<!-- Accent Toast -->
<div class="iziToast iziToast-accent">
  <div class="iziToast-body" style="padding-left: 33px;">
    <i class="iziToast-icon fe-icon-clock"></i>
    <strong>Accent</strong>
    <p>toast notification with icon</p>
  </div>
  <button class="iziToast-close"></button>
</div>

<!-- Success Toast -->
<div class="iziToast iziToast-success">
  <div class="iziToast-body" style="padding-left: 33px;">
    <i class="iziToast-icon fe-icon-check-circle"></i>
    <strong>Success</strong>
    <p>toast notification with icon</p>
  </div>
  <button class="iziToast-close"></button>
</div>

<!-- Info Toast -->
<div class="iziToast iziToast-info">
  <div class="iziToast-body" style="padding-left: 33px;">
    <i class="iziToast-icon fe-icon-help-circle"></i>
    <strong>Info</strong>
    <p>toast notification with icon</p>
  </div>
  <button class="iziToast-close"></button>
</div>

<!-- Warning Toast -->
<div class="iziToast iziToast-warning">
  <div class="iziToast-body" style="padding-left: 33px;">
    <i class="iziToast-icon fe-icon-alert-triangle"></i>
    <strong>Warning</strong>
    <p>toast notification with icon</p>
  </div>
  <button class="iziToast-close"></button>
</div>

<!-- Danger Toast -->
<div class="iziToast iziToast-danger">
  <div class="iziToast-body" style="padding-left: 33px;">
    <i class="iziToast-icon fe-icon-slash"></i>
    <strong>Danger</strong>
    <p>toast notification with icon</p>
  </div>
  <button class="iziToast-close"></button>
</div>

//- Primary Toast
.iziToast.iziToast-primary
  .iziToast-body(style="padding-left: 33px;")
    i.iziToast-icon.fe-icon-bell
    strong Primary
    p toast notification with icon
  button.iziToast-close

//- Secondary Toast No Icon
.iziToast
  .iziToast-body
    strong Secondary
    p toast notification without icon
  button.iziToast-close

//- Accent Toast
.iziToast.iziToast-accent
  .iziToast-body(style="padding-left: 33px;")
    i.iziToast-icon.fe-icon-clock
    strong Accent
    p toast notification with icon
  button.iziToast-close

//- Success Toast
.iziToast.iziToast-success
  .iziToast-body(style="padding-left: 33px;")
    i.iziToast-icon.fe-icon-check-circle
    strong Success
    p toast notification with icon
  button.iziToast-close

//- Info Toast
.iziToast.iziToast-info
  .iziToast-body(style="padding-left: 33px;")
    i.iziToast-icon.fe-icon-help-circle
    strong Info
    p toast notification with icon
  button.iziToast-close

//- Warning Toast
.iziToast.iziToast-warning
  .iziToast-body(style="padding-left: 33px;")
    i.iziToast-icon.fe-icon-alert-triangle
    strong Warning
    p toast notification with icon
  button.iziToast-close

//- Danger Toast
.iziToast.iziToast-danger
  .iziToast-body(style="padding-left: 33px;")
    i.iziToast-icon.fe-icon-slash
    strong Danger
    p toast notification with icon
  button.iziToast-close

You can alter toast notification look and behaviour via flexible data API data-toast-*:

'type' = 'none' (default) / 'info' / 'success' / 'warning' / 'danger' - To alter look of the toast.
'icon' = 'fe-icon-heart' - Use class of built-in Feather icons or any othe icon pack you use.
'position' = 'topRight' / 'topCenter' / 'bottomRight' / 'bottomCenter' / 'bottomLeft' / 'topLeft' - Where the toast notification appears on the page.
'title' = '' (string) - Toast notification title.
'message' = '' (string) - Toast notification message.

HTML
Pug

<!-- Primary Toast Top Center -->
<button class="btn btn btn-secondary" data-toast data-toast-position="topCenter" data-toast-type="primary" data-toast-icon="fe-icon-clock" data-toast-title="Primary" data-toast-message="toast notification with icon">Primary Top Center</button>

<!-- Info Toast Top Right -->
<button class="btn btn-secondary" data-toast data-toast-position="topRight" data-toast-type="info" data-toast-icon="fe-icon-help-circle" data-toast-title="Info" data-toast-message="toast notification with icon">Info Top Right</button>

<!-- Success Toast Top Left -->
<button class="btn btn-secondary mr-3 mb-3" data-toast data-toast-position="topLeft" data-toast-type="success" data-toast-icon="fe-icon-check-circle" data-toast-title="Success" data-toast-message="toast notification with icon">Success Top Left</button>

<!-- Warning Toast Bottom Right -->
<button class="btn btn-secondary mr-3 mb-3" data-toast data-toast-position="bottomRight" data-toast-type="warning" data-toast-icon="fe-icon-alert-triangle" data-toast-title="Warning" data-toast-message="toast notification with icon">Warning Bottom Right</button>

<!-- Danger Toast Bottom Left -->
<button class="btn btn-secondary mr-3 mb-3" data-toast data-toast-position="bottomLeft" data-toast-type="danger" data-toast-icon="fe-icon-slash" data-toast-title="Danger" data-toast-message="toast notification with icon">Danger Bottom Left</button>

<!-- Secondary Toast Bottom Center -->
<button class="btn btn-secondary mr-3 mb-3" data-toast data-toast-position="bottomCenter" data-toast-icon="fe-icon-bell" data-toast-title="Secondary" data-toast-message="toast notification with icon">Secondary Bottom Center</button>

//- Primary Toast Top Center
button(data-toast data-toast-position="topCenter" data-toast-type="primary" data-toast-icon="fe-icon-clock" data-toast-title="Primary" data-toast-message="toast notification with icon").btn.btn.btn-secondary Primary Top Center

//- Info Toast Top Right
button(data-toast data-toast-position="topRight" data-toast-type="info" data-toast-icon="fe-icon-help-circle" data-toast-title="Info" data-toast-message="toast notification with icon").btn.btn-secondary Info Top Right

//- Success Toast Top Left
button(data-toast data-toast-position="topLeft" data-toast-type="success" data-toast-icon="fe-icon-check-circle" data-toast-title="Success" data-toast-message="toast notification with icon").btn.btn-secondary Success Top Left

//- Warning Toast Bottom Right
button(data-toast data-toast-position="bottomRight" data-toast-type="warning" data-toast-icon="fe-icon-alert-triangle" data-toast-title="Warning" data-toast-message="toast notification with icon").btn.btn-secondary Warning Bottom Right

//- Danger Toast Bottom Left
button(data-toast data-toast-position="bottomLeft" data-toast-type="danger" data-toast-icon="fe-icon-slash" data-toast-title="Danger" data-toast-message="toast notification with icon").btn.btn-secondary Danger Bottom Left

//- Secondary Toast Bottom Center
button(data-toast data-toast-position="bottomCenter" data-toast-icon="fe-icon-bell" data-toast-title="Secondary" data-toast-message="toast notification with icon").btn.btn-secondary Secondary Bottom Center

To learn more about Bootstrap toast component, please see official documentation.

HTML
Pug

<!-- Default Bootstrap Toast -->
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
  <div class="toast-header">
    <div class="d-inline-block align-middle bg-primary rounded-circle mr-2"></div>
    <strong>Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

//- Default Bootstrap Toast
div(role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false").toast.fade.show
  .toast-header
    div(style="width: 1.25rem; height: 1.25rem;").d-inline-block.align-middle.bg-primary.rounded-circle.mr-2
    strong.mr-auto Bootstrap
    small 11 mins ago
    button(type="button" data-dismiss="toast" aria-label="Close").ml-2.close
      span(aria-hidden="true") &times;
  .toast-body
    | Hello, world! This is a toast message.

UI Kit

ALL

A-B

C-F

G-L

M-P

R-S

T-W

Color variations

Show code

Primary

toast notification with icon

Secondary

toast notification without icon

Accent

toast notification with icon

Success

toast notification with icon

Info

toast notification with icon

Warning

toast notification with icon

Danger

toast notification with icon

Toasts in action

Show code

Default Bootstrap toast

Show code

Hello, world! This is a toast message.

Toast Notifications

Code

Code

Code

Color variations

Toasts in action

Default Bootstrap toast