Create Customizable Bootstrap 4 Toasts In JavaScript - Toastboots Custom

Create Customizable Bootstrap 4 Toasts In JavaScript - Toastboots Custom
File Size: 15.2 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.