Alert Boxes

Alerts are a handy element you can drop into a form or inline on a page to communicate success, warnings, failure or just information. They'll conform to 100% of the container width you put them in.

This is a standard alert (div.alert-box)

This is a success alert (div.alert-box.success)

This is a warning alert (div.alert-box.warning)

This is an informational alert (div.alert-box.info)

Basic

You can create an alert box using minimal markup.

Rendered HTML

This is a standard alert.

Advanced

You can add more classes to your alert box to change its appearance.

Rendered HTML

This is a success alert with a close button.

This is a warning alert with a close button.

This is an informational alert with a close button.

Binding To Events

The following code will show you how to respond to the open and close events for alert box.

$(document).on('open.fndtn.alert-box', function(event) {
  console.info('An alert box has been opened!');
});


$(document).on('close.fndtn.alert-box', function(event) {
  console.info('An alert box has been closed!');
});