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.

Plugin Overview and Preview

Plugin: toastboots-custom
Author: rchapon
Category: Modal
Published: November 3, 2019
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
Last Modified:
MIT
123 views

Code Rating

0
0.0 rating
0 out of 5 stars (based on 0 reviews)
Excellent0%
Very good0%
Average0%
Poor0%
Terrible0%

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",
}); 

There are no reviews yet. Be the first one to write one.

Submit Your Review