jQuery Plugin To Manipulate Bootstrap Alerts - Bootstrap Alerts

jQuery Plugin To Manipulate Bootstrap Alerts - Bootstrap Alerts

Just another lightweight jQuery plugin to manipulate and manage web notifications using Bootstrap alerts component, with support for custom headings, messages and glyphicons.

1. Add the JavaScript file bootstrap-alerts.js to the Bootstrap page.

<link rel="stylesheet" href="bootstrap.min.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-alerts.js"></script>

2. Create a container element to place the alerts.

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

3. Create and display a default alert notification on the web page.

$('#alert-container').bootstrapAlert({
  message: 'This is a <b>default</b> message.'
});

4. Change the default theme of the alert notification.

$('#alert-container').bootstrapAlert({
  message: 'Message here',
  type: 'success', // or 'info', 'warning', 'danger'
});

5. Determine whether or not the alert notification is dismissable.

$('#alert-container').bootstrapAlert({
  message: 'Message here',
  dismissible: true
});

6. Add a custom header to the alert notification.

$('#alert-container').bootstrapAlert({
  message: 'Message here',
  heading: 'My heading'
});

7. Determine whether or not to close the existing alerts when a new notification is created.

$('#alert-container').bootstrapAlert({
  message: 'Message here',
  clear: true
});

This awesome jQuery plugin is developed by jprieton. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 12.11.2017
  • Source