Alert

Bring attention or notice to a message.

Class Result
.alertthe base alert class to setup structure
.alert-primaryprimary theme color
.alert-secondarysecondary theme color
.alert-successsuccess theme color
.alert-infoinfo theme color
.alert-warningwarning theme color
.alert-dangerdanger theme color
.alert-lightlight theme color
.alert-darkdark theme color

Usage

<div class="alert alert-primary">
  This is a primary alert—check it out!
</div>
<div class="alert alert-secondary">
  This is a secondary alert—check it out!
</div>
<div class="alert alert-success">
  This is a success alert—check it out!
</div>
<div class="alert alert-danger">
  This is a danger alert—check it out!
</div>
<div class="alert alert-warning">
  This is a warning alert—check it out!
</div>
<div class="alert alert-info">
  This is a info alert—check it out!
</div>
<div class="alert alert-light">
  This is a light alert—check it out!
</div>
<div class="alert alert-dark">
  This is a dark alert—check it out!
</div>
This is a primary alert—check it out!
This is a secondary alert—check it out!
This is a success alert—check it out!
This is a danger alert—check it out!
This is a warning alert—check it out!
This is a info alert—check it out!
This is a light alert—check it out!
This is a dark alert—check it out!

Compiled Example

Input

<div class="alert alert-primary"><strong>Well done!</strong> You successfully read this important alert message.</div>

Output

<table class="alert alert-primary" role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate !important; width: 100%; border: 0;">
  <tbody>
    <tr>
      <td style="line-height: 24px; font-size: 16px; border-radius: 4px; color: #012e70; margin: 0; padding: 12px 20px; border: 1px solid transparent;" align="left" bgcolor="#d7e7ff">
        <div>
          <strong>Well done!</strong> You successfully read this important alert message.
        </div>
      </td>
    </tr>
  </tbody>
</table>
On this page