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.jsalong 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.