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

by Posted on

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.
bootstrap-alert-notification-bar


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.

Libraries

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

<!--CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
 
<!--JS-->
<script  src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
<script src="bootstrap-alerts.min.js"></script>

HTML

Create a alert notification container element to display messages.

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



JS

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

$('#alert-container').bootstrapAlert({
    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.

DEMO | DOWNLOAD

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.


Published by admin