bootstrap 4 toasts toastboots custom - Free Download Create Customizable Bootstrap 4 Toasts In JavaScript - Toastboots Custom

Free Download Create Customizable Bootstrap 4 Toasts In JavaScript – Toastboots Custom

By Posted on

This time I will share jQuery Plugin and tutorial about Create Customizable Bootstrap 4 Toasts In JavaScript – Toastboots Custom, hope it will help you in programming stack.

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

Demo Download

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.

view source
01 <!-- Bootstrap 4 Files -->
02 <link rel="stylesheet" href="bootstrap.min.css" />
03 <script src="jquery.min.js"></script>
04 <script src="popper.min.js"></script>
05 <script src="bootstrap.min.js"></script>
06 <!-- Toastboots Custom Plugin -->
07 <script src="toastboots-custom/toastboots-custom.js"></script>
08 <!-- OPTIONAL -->
09 <script src="toastboots-custom/toastboots-custom-errors_en.js"></script>
10 <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.

view source
1 <div id="container">
2   ...
3 </div>
view source
1 $.toast({
2   site: 'container'
3 });

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

view source
1 $.toast({
2   site: 'container',
3   title: 'Custom Toast',
4   subtitle: '3 times',
5   content: 'I am a toast'
6 });

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

view source
1 $.toast({
2   site: 'container',
3   autohide: "true",
4   delay: 5000
5 });

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
view source
1 $.toast({
2   site: 'container',
3   type: 'danger'
4 });

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
view source
01 $.toast({
02  
03   // bg & text colors of title
04   titleBg: "bg-primary",
05   titleTc: "text-white",
06  
07   // bg & text colors of sub-title
08   subtitleTc: "text-white",
09   timesTc: "text-light",
10  
11   // bg & text colors of toast content
12   contentBg: "bg-white",
13   contentTc: "text-dark"
14  
15 });

7. Enable/disable the animation.

view source
1 $.toast({
2   site: 'container',
3   animation: "true"
4 });

8. Set the width of the toast notification.

view source
1 $.toast({
2   site: 'container',
3   width: "auto"
4 });

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

view source
1 $.toast({
2   site: 'container',
3   posy: 'top:0',
4   posx: 'right:0',
5 });

10. All default configuration options.

view source
01 $.toast({
02   title: "Notice!",
03   titleBg: "bg-primary",
04   titleTc: "text-white",
05   subtitle: "Now",
06   subtitleTc: "text-white",
07   timesTc: "text-light",
08   content: "Hello World, this is a toast",
09   contentBg: "bg-white",
10   contentTc: "text-dark",
11   animation: "true",
12   autohide: "true",
13   delay: 3000,
14   width: "auto",
15   type: "",
16   posy: 'top:0',
17   posx: 'right:0',
18   errors: false // enable console log
19 });

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.

source : jquery.net

Related posts: