Alerts are used to inform users about their actions on ACS's websites or applications. Common alert statuses include success, warning, and error.

Alerts | Statuses

Warning:

Wrap any text and an optional dismiss button in .alert .alert-warning for a basic warning alert message.

Warning! Best check yo self, you're not looking too good.

<div class="alert alert-warning">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>

Error or Danger:

Oops! Change a few things up and try submitting again.

<div class="alert alert-danger">
  ...
</div>

Success:

Well done! You successfully read this important alert message.

<div class="alert alert-success">
   ...
</div>

Informational:

Heads up! This alert needs your attention, but it's not super important.

<div class="alert alert-info">
   ...
</div>

Alerts | Options

For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.

Warning!

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.


<div class="alert alert-warning alert-block">
   <button type="button" class="close" data-dismiss="alert">&times;</button>
   <h4>Warning!</h4>
   <p>...</p>
</div>

Dismiss buttons

Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.

<a href="#" class="close" data-dismiss="alert">&times;</a>

Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.


<button type="button" class="close" data-dismiss="alert">&times;</button>