Preview:
  <div class="alert-box alert-success">
      <span><i class="fa fa-check-circle"></i> Success! Indicates positive action to the user.</span>
  </div>
  <div class="alert-box alert-danger">
      <span><i class="fa fa-exclamation-triangle"></i> Danger! Indicates danger negative action to the
          user.</span>
  </div>
  <div class="alert-box alert-warning">
      <span> <i class="fa fa-exclamation-triangle"></i> Warning Alert. Indicates warning to the user.
      </span>
  </div>
  <div class="alert-box alert-primary">
      Primary Alert. Indicates any regular or normal information to the
      user.
  </div>
  <div class="alert-box alert-secondary">
      Secondary Alert. Indicates any secondary information to the user.
  </div>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter