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.
Libraries
Include all bootstrap library with bootstrap-alerts.min.js lib.
<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"> <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.
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.
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.
