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.<!-- 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.<!-- 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.
<!-- 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">×</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") ×
.toast-body
| Hello, world! This is a toast message.
toast notification with icon
toast notification without icon
toast notification with icon
toast notification with icon
toast notification with icon
toast notification with icon
toast notification with icon