Alert

Alert messages can be used to notify the user about something special: danger, success, information or warning.

Simple Alert

Use the class .alert and use one of the required classes .alert-dark, .alert-primary, .alert-success, .alert-warning or .alert-errorto get the desired styling.

A simple alert—check it out!
A dark alert—check it out!
A primary alert—check it out!
A success alert—check it out!
A warning alert—check it out!
A error alert—check it out!
 
   <div class="alert">
   <div class="alert-text">
   A simple alert—check it out!</div>
   </div>
  
   <div class="alert alert-dark">
   <div class="alert-text">
   A dark alert—check it out!</div>
   </div>
  
   <div class="alert alert-primary">
   <div class="alert-text">
   A primary alert—check it out!</div>
   </div>
  
   <div class="alert alert-success">
   <div class="alert-text">
   A success alert—check it out!</div>
   </div>
  
   <div class="alert alert-warning">
   <div class="alert-text">
   A warning alert—check it out!</div>
   </div>
  
  <div class="alert alert-error">
  <div class="alert-text">
  A error alert—check it out!</div>                                                                    
  </div>
Alert Outline

Use the class .alert and use one of the required classes .alert-primary-outline, .alert-success-outline, .alert-warning-outline or .alert-error-outlineto get the desired styling.

A primary alert—check it out!
A success alert—check it out!
A warning alert—check it out!
A error alert—check it out!
 
 <div class="alert alert-primary-outline">
 <div class="alert-text">
 A primary alert—check it out!</div>
 </div>
  
 <div class="alert alert-success-outline">
 <div class="alert-text">
 A success alert—check it out!</div>
 </div>
  
 <div class="alert alert-warning-outline">
 <div class="alert-text">
 A warning alert—check it out!</div>
 </div>
  
 <div class="alert alert-error-outline">
 <div class="alert-text">
 A error alert—check it out!</div>
 </div>
Alert with Icon

Use the class .alert and .alert-icon. Use one of the required classes .alert-dark, .alert-primary, .alert-success, .alert-warning or .alert-errorto get the desired styling.

A simple alert with icon!
A simple alert with icon!
A primary alert—check it out!
A success alert—check it out!
A warning alert—check it out!
A error alert—check it out!
 
 <div class="alert alert-icon">
 <div class="alert-i">
 <i class="fas fa-info-circle"></i>
 </div>
 <div class="alert-text">
 A simple alert with icon—check it out!
 </div> </div>
  
 <div class="alert alert-icon alert-dark">
 <div class="alert-i">
 <i class="fas fa-info-circle"></i>
 </div>
 <div class="alert-text">
 A simple alert with icon—check it out!
 </div> </div>
  
 <div class="alert alert-icon alert-primary">
 <div class="alert-i">
 <i class="fas fa-info-circle"></i>
 </div>
 <div class="alert-text">A primary alert—check it out!
 </div></div>
  
 <div class="alert alert-icon alert-success">
 <div class="alert-i">
 <i class="far fa-check-circle"></i>
 </div>
 <div class="alert-text">A success alert—check it out!
 </div> </div>
  
 <div class="alert alert-icon alert-warning">
 <div class="alert-i">
 <i class="fas fa-exclamation-circle"></i>
 </div>
 <div class="alert-text">A warning alert—check it out!
 </div> </div>
  
 <div class="alert alert-icon alert-error">
 <div class="alert-i">
 <i class="fas fa-exclamation-triangle"></i>
 </div>
 <div class="alert-text">A error alert—check it out!
 </div> </div>
Alert with Icon Outline

Use the class .alert and .alert-icon. Use one of the required classes .alert-primary-outline, .alert-success-outline, .alert-warning-outline or .alert-error-outlineto get the desired styling.

A primary alert—check it out!
A success alert—check it out!
A warning alert—check it out!
A error alert—check it out!

 <div class="alert alert-icon alert-primary-outline">
 <div class="alert-i">
 <i class="fas fa-info-circle"></i>
 </div>
 <div class="alert-text">A primary alert—check it out!
 </div></div>

 <div class="alert alert-icon alert-success-outline">
 <div class="alert-i">
 <i class="far fa-check-circle"></i>
 </div>
 <div class="alert-text">A success alert—check it out!
 </div></div>

<div class="alert alert-icon alert-warning-outline">
<div class="alert-i">
<i class="fas fa-exclamation-circle"></i>
</div>
<div class="alert-text">A warning alert—check it out!
</div></div>

<div class="alert alert-icon alert-error-outline">
<div class="alert-i">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div class="alert-text">A error alert—check it out!
</div></div>
Get Started
Avatar