Create Customizable Bootstrap 4 Toasts In JavaScript - Toastboots Custom

Toastboots Custom is a jQuery/Bootstrap plugin that helps developers generate highly customizable Bootstrap 4 toasts in the web app.

Features:

• You can attach the toasts to any containers.
• 29 built-in toast types.
• With or without animations.
• Auto dismiss or not.

See Also:

• All jQuery Toast Plugins
• 10 Best Toast Notification jQuery/JavaScript Plugins
• Best jQuery Plugins To Extend Bootstrap 4

How to use it:

1. Insert the Toastboots Custom plugin's JavaScript into the Bootstrap 4 project.

<!-- Bootstrap 4 Files -->
<link rel="stylesheet" href="bootstrap.min.css" />
<script src="jquery.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>
<!-- Toastboots Custom Plugin -->
<script src="toastboots-custom/toastboots-custom.js"></script>
<!-- OPTIONAL -->
<script src="toastboots-custom/toastboots-custom-errors_en.js"></script>
<script src="toastboots-custom/toastboots-custom-errorshandler.js"></script>

2. Create a new instance and specify the target container in which you'd like to place the toast notification.

<div id="container">
  ...
</div>

$.toast({
  site: 'container'
});

3. Define the title, subtitle, content of the toast notification.

$.toast({
  site: 'container',
  title: 'Custom Toast',
  subtitle: '3 times',
  content: 'I am a toast'
});

4. Specify the timeout for the auto dismiss functionality. Set the autohide option to 'false' to disable the auto dismiss functionality.

$.toast({
  site: 'container',
  autohide: "true",
  delay: 5000
});

5. Specify the toast type. All possible types:

1. primary
2. primary-light
3. primary-dark
4. dark-primary
5. light-primary
6. warning
7. warning-light
8. warning-dark
9. dark-warning
10. light-warning
11. danger
12. danger-light
13. danger-dark
14. dark-danger
15. light-danger
16. success
17. success-light
18. success-dark
19. dark-success
20. light-success
21. info
22. info-light
23. info-dark
24. dark-info
25. light-info
26. dark
27. light
28. dark-light
29. light-dark

$.toast({
  site: 'container',
  type: 'danger'
});

6. Or customize the appearance using the following CSS classes:

• .text-primary
• .text-secondary
• .text-success
• .text-danger
• .text-info
• .text-warning
• .text-light
• .text-dark
• .text-body
• .text-muted
• .text-white
• .text-black-50
• .text-light-50
• .bg-primary
• .bg-secondary
• .bg-success
• .bg-danger
• .bg-info
• .bg-warning
• .bg-light
• .bg-dark
• .bg-white
• .bg-transparent

$.toast({

  // bg & text colors of title
  titleBg: "bg-primary",
  titleTc: "text-white",

  // bg & text colors of sub-title
  subtitleTc: "text-white",
  timesTc: "text-light",

  // bg & text colors of toast content
  contentBg: "bg-white",
  contentTc: "text-dark"

});

7. Enable/disable the animation.

$.toast({
  site: 'container',
  animation: "true"
});

8. Set the width of the toast notification.

$.toast({
  site: 'container',
  width: "auto"
});

9. Set the x/y offsets of the toast notification.

$.toast({
  site: 'container',
  posy: 'top:0',
  posx: 'right:0',
});

10. All default configuration options.

$.toast({
  title: "Notice!",
  titleBg: "bg-primary",
  titleTc: "text-white",
  subtitle: "Now",
  subtitleTc: "text-white",
  timesTc: "text-light",
  content: "Hello World, this is a toast",
  contentBg: "bg-white",
  contentTc: "text-dark",
  animation: "true",
  autohide: "true",
  delay: 3000,
  width: "auto",
  type: "",
  posy: 'top:0',
  posx: 'right:0',
  errors: false // enable console log
});

Changelog:

2019-11-06

• Add support for error handling

---

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