patternfly/tests-src/alerts.html

This reference implementation of PatternFly is based on [Bootstrap v3](http://getbootstrap.com/). Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.

---
categories: [Widgets]
layout: page
title: Alerts
resource: true
---
      <div class="alert alert-danger">
        <span class="pficon pficon-error-circle-o"></span>
        <strong>Hey there is a problem!</strong> Yeah this is really messed up and you should <a href="#" class="alert-link">know about it</a>.
      </div>
      <div class="alert alert-warning">
        <span class="pficon pficon-warning-triangle-o"></span>
        <strong>There might be a problem here!</strong> We are not really sure, but <a href="#" class="alert-link">it might be bad</a>.
      </div>
      <div class="alert alert-success">
        <span class="pficon pficon-ok"></span>
        <strong>Great job!</strong> This is really working out <a href="#" class="alert-link">great for us</a>.
      </div>
      <div class="alert alert-info">
        <span class="pficon pficon-info"></span>
        <strong>This is some general information.</strong> You should <a href="#" class="alert-link">know about this</a>.
      </div>
      <hr>
      <div class="alert alert-danger alert-dismissable">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
          <span class="pficon pficon-close"></span>
        </button>
        <span class="pficon pficon-error-circle-o"></span>
        <strong>Hey there is a problem!</strong> Yeah this is really messed up and you should <a href="#" class="alert-link">know about it</a>.
      </div>
      <div class="alert alert-warning alert-dismissable">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
          <span class="pficon pficon-close"></span>
        </button>
        <span class="pficon pficon-warning-triangle-o"></span>
        <strong>There might be a problem here!</strong> We are not really sure, but <a href="#" class="alert-link">it might be bad</a>.
      </div>
      <div class="alert alert-success alert-dismissable">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
          <span class="pficon pficon-close"></span>
        </button>
        <span class="pficon pficon-ok"></span>
        <strong>Great job!</strong> This is really working out <a href="#" class="alert-link">great for us</a>.
      </div>
      <div class="alert alert-info alert-dismissable">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
          <span class="pficon pficon-close"></span>
        </button>
        <span class="pficon pficon-info"></span>
        <strong>This is some general information.</strong> You should <a href="#" class="alert-link">know about this</a>.
      </div>
      <div class="alert alert-success">
        <button class="btn btn-default pull-right" type="submit">Button</button>
        <span class="pficon pficon-ok"></span>
        <strong>Great job!</strong> This is really working out <a href="#" class="alert-link">great for us</a>.
      </div>