Bootstrap 4 Custom Toast Notification - toastboots.js

The “toastboots-custom” is a highly customizable and well developed jQuery plugin to create custom toast notification for Bootstrap 4. The plugin comes with multiple configuration options to set the custom value of each element of toast. You can easily set custom values for heading, sub title and contents. The toast notification can be trigger on various jQuery / JavaScript events.

Furthermore, you can set Bootstrap built-in classes (or custom class) for each element of toast notification.

[intro_ad]

Plugin Overview and Preview

Plugin:	toastboots-custom
Author:	rchapon
Category:	Modal
Published:	January 19, 2024
File Type:	zip archive (HTML, CSS & JavaScript )
Package Size:	6 KB
Dependencies:	Font Awesome 5 , jQuery 3.0 or Latest version and Bootstrap 4.1.3

Bootstrap 4 Custom Toast Notification - toastboots.js

Last Modified: [last-modified]

MIT

Fork on GitHub

2,671

Demo Download Download Master Repository

[ad_after_overview]

Code Rating

[site_reviews_summary assigned_to=”post_id”]

Documentation
Configuration Options
Changelog
Developer Reviews

How to Create Bootstrap 4 Custom Toast Notification

1. In first step, load the Font Awesome 5 , jQuery and Bootstrap into your HTML page.

<!-- Font Awesome 5-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

2. After that, include the toastboots-custom’s JavaScript file in your webpage.

<!-- toastboots-custom JS -->
<script src="js/toastboots-custom.js"></script>

3. Create HTML button element (or whatever you want) with unique id. This button will be used to trigger notification on JavaScript click event.

     <button class="btn btn-primary" id="my-btn">Check Toast Notification</button>

4. When all was done, call the plugin in jQuery document ready function with basic configuration options.

$(document).ready(function(){
	    $("#my-btn").click(function(){
	$.toast({
                site: '',
                title: 'Bootstrap Custom Toast',
                titleBg: 'bg-success',
                titleTc: 'text-success',
                subtitle: 'text-light',
                subtitleTc: 'text-info',
                timesTc : '',
                content: 'Tost content here',  
                contentBg: '',
                contentTc: '',
                type: 'primary-dark',
                animation: 'true',
                autohide: 'true',
                delay: '',
                width : '500px',
                posy: '50px',
                posx: ''
            });
    });
});

For more advance usage, please check the Configuration Options tab.

Changelog

11/03/2019

Initial release.

Advance Configuration Options for Bootstrap Toast Notification

The following are some advanced configuration options to create / customize Bootstrap 4 custom toast notification.

Option	Default	Type	Description
`site`	“body”	`String`	The selector where to append new toast notification. Example: $.toast({ site : "body", });
`title`	“Notice!”	`String`	It define the title for the toast modal. Example: $.toast({ title : "Notice!", });
`titleBg`	“bg-primary”	`String`	It define the CSS class for title background. You can use Bootstrap built-in classes or your custom class name in this option. Example: $.toast({ titleBg : "bg-primary", });
`titleTc`	“text-white”	`String`	It define the class for title color. Example: $.toast({ titleTc : "text-white", });
`subtitle`	“Now”	`String`	Show the sub title in toast notification. Example: $.toast({ subtitle : "Now", });
`subtitleTc`	“text-white”	`String`	The class for sub title color. Example: $.toast({ subtitleTc : "text-white", });
`timesTc`	“text-white”	`String`	It define the color class for close button (times). Example: $.toast({ timesTc : "text-white", });
`content`	“Hello World!, this is toast.”	`String`	This option used to show the main content of toast notification. Example: $.toast({ content : "Hello World!, this is toast.", });
`contentBg`	“bg-white”	`String`	The background color for main content. Example: $.toast({ contentBg : "bg-white", });
`contentTc`	“text-dark”	`String`	The color class for content text. Example: $.toast({ contentTc : "text-dark", });
`type`	“”	`String`	It is used to define the type of toast notification. Like success, info, error etc. Example: $.toast({ type : "", });
`animation`	true	`Boolean`	Enable / disable animation for toast. Example: $.toast({ animation : true, });
`autohide`	true	`Boolean`	Enable / disable auto hide notification. Example: $.toast({ autohide : true, });
`delay`	3000	`Number`	Define the delay in milliseconds. Example: $.toast({ delay : 3000, });
`width`	“auto”	`String`	This option is useful to set the custom width (in px like 140px) for notification. Example: $.toast({ width : "auto", });
`posy`	“top:0”	`String`	It define the position of the toast on the axis “Y” in relation to the property site. Example: $.toast({ posy : "top:0", });
`posx`	“right:0”	`String`	It is useful to set the position of the toast on the axis “X”. Example: $.toast({ posx : "right:0", });

[site_reviews assigned_to=”post_id”]

Submit Your Review

[site_reviews_form assign_to=”post_id”]

[ad_after_artical]

Similar Code Snippets:

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.