Bootstrap Notification Bar with Close Button

The Notify is a lightweight jQuery plugin to create Bootstrap notification bar with close button and Font Awesome icons. The plugin lets you to trigger multiple dynamic notifications on different jQuery / JavaScript events. You can easily show close-able error, success, info and warning notification message to users.

Further, these CSS3 stylish notifications bars provide the best user experience. Notification message disappear automatically, however user can also close it manually.

Plugin Overview

Plugin: Notify Bootstrap
Author: The MUDA Organization
Licence: MIT Licence
Published: January 11, 2024
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version, Bootstrap 4.1.3 and Font Awesome
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 42 KB

How to Use Bootstrap Notification Bar Plugin

1. Load the jQuery, Bootstrap framework and Font Awesome CSS in your website/app project to getting started with Notify plugin.

<!-- 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>

<!-- Fontawesome 5-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">

2. After that create a button element (or any event handler) that will be used to trigger the notification. You can use any jQuery / JavaScript event (click, mouseenter, mousemove, mouseleave, submit etc) to show the notification.

<button id="btn-test">My Button</button>

3. Now, define your message in notify plugin and initialize it.

$(document).ready(function(){

$('#btn-test').on('click',function(){
    notify('bell','Title of the message!','This is a sample notification message!');
});

});

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...