Alert

Display user notifications, actions, and alerts

The alert is a simple colored block used for displaying onscreen notifications or actions. Get started by using the alert class on a div tag.



This is an alert

You better do this thing
<div class="alert">
  <h4>This is an alert</h4>
  <a href="#">You better do this thing</a>
</div>
Copy

Style

Colors

You can use the color palette to color your alerts by prefixing the name of a color with is-* . For example to use the primary color you would add the is-primary modifier to the alert.


This is an alert

You better do this thing

This is an alert

You better do this thing

This is an alert

You better do this thing

This is an alert

You better do this thing

This is an alert

You better do this thing
<div class="alert is-primary">
  <h4>This is an alert</h4>
  <span>You better do this thing</span>
</div>

<div class="alert is-danger">
  <h4>This is an alert</h4>
  <span>You better do this thing</span>
</div>

<div class="alert is-warning">
  <h4>This is an alert</h4>
  <span>You better do this thing</span>
</div>

<div class="alert is-success">
  <h4>This is an alert</h4>
  <span>You better do this thing</span>
</div>

<div class="alert is-info">
  <h4>This is an alert</h4>
  <span>You better do this thing</span>
</div>
</> Show code
Copy

The color palette colors have been lightened to make the alerts a bit more subtle.


Outline

The is-outline modifier can be used if you do not want an alert with a block color background. This modifier must always be used with the color palette modifier.


This is an alert

You better do this thing

This is an alert

You better do this thing

This is an alert

You better do this thing

This is an alert

You better do this thing

This is an alert

You better do this thing
<div class="alert is-primary is-outline">
  <h4>This is an alert</h4>
  <span>You better do this thing</span>
</div>

<div class="alert is-danger is-outline">
  <h4>This is an alert</h4>
  <span>You better do this thing</span>
</div>

<div class="alert is-warning is-outline">
  <h4>This is an alert</h4>
  <span>You better do this thing</span>
</div>

<div class="alert is-success is-outline">
  <h4>This is an alert</h4>
  <span>You better do this thing</span>
</div>

<div class="alert is-info is-outline">
  <h4>This is an alert</h4>
  <span>You better do this thing</span>
</div>
</> Show code
Copy

Closable

To make a closable alert you can make use of the close button element in the button module. Just add a button--close element to the alert and it will automatically position in the top right corner.


This is an alert

Click the little cross to close me

This is an alert

Click the little cross to close me

This is an alert

Click the little cross to close me
<div class="alert">
  <h4>This is an alert</h4>
  <span>Click the little cross to close me</span>
  <a class="button--close" onclick="this.closest('.alert').remove()"></a>
</div>

<div class="alert is-primary">
  <h4>This is an alert</h4>
  <span>Click the little cross to close me</span>
  <a class="button--close has-no-background" onclick="this.closest('.alert').remove()"></a>
</div>

<div class="alert is-primary is-outline">
  <h4>This is an alert</h4>
  <span>Click the little cross to close me</span>
  <a class="button--close has-no-background" onclick="this.closest('.alert').remove()"></a>
</div>
Copy

Variables

The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.


VariableTypeDefault value
$alert-border-colorcolorrgba(10, 10, 10, 0.25)
$alert-border-stylestringsolid
$alert-border-widthunits1px
$alert-radiusunits0
$alert-paddingunits1rem