Custom Bootstrap 4 Toasts In jQuery - toastyMostly

toastyMostly is a lightweight and easy jQuery plugin that simplifies the process of creating and updating Bootstrap 4 powered toast notifications on the web app.

See also:

• Best Toast Notification Plugins
• Best Bootstrap 4 Plugins

How to use it:

1. Download and import the toastyMostly.min.js script into the Bootstrap project.

<!-- Bootstrap stylesheet -->
<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<!-- jQuery + Bootstrap JS -->
<script src="/path/to/jquery.slim.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
<!-- toastyMostly plugin -->
<script src="/path/to/toastyMostly.min.js"></script>

2. Create a new toastyMostly instance and pass the options as per your needs:

• delay: auto dismiss the toast after this timeout
• autohide: enable/disable auto dismiss
• animation: enable/disable CSS animations
• style: default CSS styles

let myToast = toastyMostly({
    delay: 2000, 
    autohide: true, 
    animation: true,
    style: {
      'position': 'fixed', 
      'top': '100px', 
      'right': '0', 
      'height': '0', 
      'z-index': '2000', 
      'width': '250px'
    }
});

3. Send a toast message to the end user. Available config options:

• time: small text displayed in the upper right corner of the toast
• title: toast title
• body: toast message
• class: extra classes
• id: unique ID
• closeBtn: show close button 
• append: appends or prepends the toast
• delay: overrides the global delay option
• autohide: overrides the global autohide option
• animation: overrides the global animation option

let singleToast = myToast.send({
    time: null, 
    title: null, 
    body: null, 
    class: null, 
    id: null, 
    closeBtn: true, 
    append: true,
    delay: 2000, 
    autohide: true, 
    animation: true
});

4. Update an already generated toastyMostly toast. Passing the returned id from the send() and an optional config object. Available config options:

• time: small text displayed in the upper right corner of the toast
• title: toast title
• body: toast message
• addClass: extra classes
• removeClass: removes a class from the toast

let singleToast = myToast.send({
    time: null, 
    title: null, 
    body: null, 
    addClass: null, 
    removeClass: null
});

---

This awesome jQuery plugin is developed by rogerthomas84. For more Advanced Usages, please check the demo page or visit the official website.