Customize Boostrap Alert Notification Bar For Displaying Warning, Error, Success Messages

Here I am going to introduce one more bootstrap light weight plugin to create Customize Boostrap Alert Notification Bar For Displaying Warning, Error, Success Messages. With the help of this plugin you can now add custom headings, messages and glyphicons on bootstrap alerts component.

Integrate Customize Boostrap Alert Notification Bar

Integrating this plugin on your bootstrap website is quite easy just add bootstrap-alerts.min.js along with bootstrap library.


Include all bootstrap library with bootstrap-alerts.min.js lib.

<link rel="stylesheet" href="" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script  src="" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous"></script>
<script src="" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
<script src="bootstrap-alerts.min.js"></script>


Create a alert notification container element to display messages.

<div id="alert-container"></div>


Call the plugin function to display alert notification bar with custom properties like theme, heading, message etc.

    type: 'success', // Optional, , default: 'info',  values: 'success', 'info', 'warning' or 'danger'
    dismissible: true, // Optional, default: true 
    heading: 'My Heading', // Optional, default: ''
    message: 'My message.',  // Required,
    clear: true // Optional, Clears the container, default: true 

See live demo and download source code.


See official github repository for more information and follow for future updates. Don’t forget to read license for using above plugin in your commercial project.

One Reply to “Customize Boostrap Alert Notification Bar For Displaying Warning, Error, Success Messages”

  1. Hi Rohit,
    I am using this in my web app. but expecting a feature in it.

    Once display the notification it shld automatically disappear after few secs.

    It can be done using jquery. but again if we raise the notification its not displaying..

    Hope you understand my expected feature.
    it will be great if you include id pls.

Leave a Reply

Your email address will not be published. Required fields are marked *

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