A Lightweight Bootstrap 4 Toast Notification Plugin | BS4 Advanced Toast

How to make use of it:

1. To use this library, make sure you first have a jQuery library and Bootstrap 4 framework loaded within the doc.

<!-- Required -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

<!-- bs4-toast.js files -->
<link href="css/bs4Toast.css" rel="stylesheet" />
<script src="js/bs4-toast.js"></script>

2. Create primary Bootstrap toasts with built-in styles as follows:

// default
bs4Toast.show('Default Toast', 'This is Default toast example.',

// primary
bs4Toast.primary('Primary Toast', 'This is Primary toast example.');

// error
bs4Toast.error('Danger Toast', 'This is danger toast example.');

// warning
bs4Toast.warning('Warning Toast', 'This is warning toast example.');

3. Add icons to the toast notifications. The icon possibility supports each picture and font superior iconic font.

bs4Toast.show('Toast with Icon', 'This is toast with buttons example.', {
  icon : {
    type : 'image',
    src : 'toast.png'
  }
});

bs4Toast.show('Toast with Icon', 'This is toast with buttons example.', {
  icon : {
    type : 'fontawesome',
    class : 'fa-bell'
  }
});

4. Add customized action buttons with callbacks to the toast notification.

bs4Toast.show('Toast with Button', 'This is toast with buttons example.', {
  buttons: [{
    text : 'Button 1',
    class : 'btn btn-success',
    callback : () => {
      alert('Button 1 clicked');
    }
  },{
    text : 'Button 2',
    class : 'btn btn-primary',
    callback : () => {
      alert('Button 2 clicked');
    }
  }]
}

5. Add additional CSS class(es) to the header & body of the toast notification.

bs4Toast.show('Custom Header/Footer', 'This is toast with custom header/body classes.', {
  headerClasses : [],
  bodyClasses : []
}

6. Determine the delay timeout in ms.

bs4Toast.show('Custom Header/Footer', 'This is toast with custom header/body classes.', {
  delay: 5000
}

Advanced Bootstrap Toast Component In JavaScript, , toast bootstrap, bootstrap 5 toast example, bootstrap notification

See Demo And Download