Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Examples

Alert Link color

Use the .alert-link utility class to quickly provide matching colored links within any alert.

Examples

Alert with Icon

Examples

This is a warning alert!
This is a info alert!
This is a danger alert!
This is a success alert!
Alert Dismissing

Using the alert JavaScript plugin, it’s possible to dismiss any alert inline. Here’s how:

  • Be sure you’ve loaded the compiled Bootstrap JavaScript.
  • Add a dismiss button and the .alert-dismissible class, which adds extra padding to the right of the alert and positions the .close button.
  • On the dismiss button, add the data-dismiss="alert" attribute, which triggers the JavaScript functionality. Be sure to use the "button" element with it for proper behavior across all devices.
  • To animate alerts when dismissing them, be sure to add the .fade and .show classes.
Heads up! This alert needs your attention, it's kinda important.
Superb! This is a multi-purpose alert that's useful anywhere!.
Oh snap! You need to Change a few things up and try again.
Well done! You successfully read this important alert message.
Additional content

Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

Notify.js

Notify.js is a jQuery plugin to provide simple yet fully customisable notifications.

Fixed Notifications on Top

Notify.js

Notify.js is a jQuery plugin to provide simple yet fully customisable notifications.

Default Notifications Displays on top right