اعلان ها

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.

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.

اعلان ها

Code

Code

Code

Color variations

Toasts in action

Default Bootstrap toast