Alerts

Alerts

Global Alert Properties

  • Must contain the appropriate icon
  • Add the close option when the message should be dismissible
<div class="alert alert-success alert-dismissible" role="alert">
  <i class="icon-success"></i>
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
  <strong>Well done!</strong> You successfully read this important alert message. <a href="#" class="alert-link">This is what a link will look like</a>
</div>
<div class="alert alert-info alert-dismissible" role="alert">
  <i class="icon-info-with-circle"></i>
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
  <strong>Heads up!</strong> This alert needs your attention, but it's not super important. <a href="#" class="alert-link">This is what a link will look like</a>
</div>
<div class="alert alert-warning alert-dismissible" role="alert">
  <i class="icon-warning"></i>
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
  <strong>Warning!</strong> Best check yo self, you're not looking too good. <a href="#" class="alert-link">This is what a link will look like</a>
</div>
<div class="alert alert-danger alert-dismissible" role="alert">
  <i class="icon-warning"></i>
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
  <strong>Oh snap!</strong> Change a few things up and try submitting again. <a href="#" class="alert-link">This is what a link will look like</a>
</div>
Note: D&B's alerts follow the same convention as outlined on Bootstrap's website: http://getbootstrap.com/components/#alerts
filed under: