New This website is new, your feedback will help us to improve it.

Alert

Overview

Use the .bsk-alert class to highlight feedback about a user action, or some other event.


You must pick a variant for each alert, otherwise it will look strange. It is not enough to use .bsk-alert on its own.

You must pick a style for each alert, otherwise it will look strange. It is not enough to use .bsk-alert on its own.

Variants

There is no default alert variant, as a grey alert for example wouldn't make a lot of sense.

Primary alert

<div class="bsk-alert bsk-alert-solid bsk-alert-primary" role="alert">
  <p>Primary alert</p>
</div>

Experimental alert

<div class="bsk-alert bsk-alert-solid bsk-alert-experimental" role="alert">
  <p>Experimental alert</p>
</div>

Contextual colours

The standard contextual colours can be used for context by adding these classes:

Standard Context Alert Contextual Class
Success .bsk-alert-success
Warning .bsk-alert-warning
Danger .bsk-alert-danger
Info .bsk-alert-info 

<div class="bsk-alert bsk-alert-solid bsk-alert-success" role="alert">Success alert</div>
<div class="bsk-alert bsk-alert-solid bsk-alert-warning" role="alert">Warning alert</div>
<div class="bsk-alert bsk-alert-solid bsk-alert-danger" role="alert">Danger alert</div>
<div class="bsk-alert bsk-alert-solid bsk-alert-info" role="alert">Info alert</div>

Experimental icon

The experimental standard conventional icon can be used for adding extra context to alerts.

<div class="bsk-alert bsk-alert-solid bsk-alert-experimental" role="alert">
<i class="fas fa-flask" aria-hidden="true"></i> Experimental alert
</div>

Contextual icons

<div class="bsk-alert bsk-alert-solid bsk-alert-success" role="alert">
  <i class="far fa-check bsk-alert-icon" aria-hidden="true"></i> Success alert
</div>
<div class="bsk-alert bsk-alert-solid bsk-alert-warning" role="alert">
  <i class="far fa-exclamation-triangle bsk-alert-icon" aria-hidden="true"></i> Warning alert
</div>
<div class="bsk-alert bsk-alert-solid bsk-alert-danger" role="alert">
  <i class="fas fa-exclamation-circle bsk-alert-icon" aria-hidden="true"></i> Danger alert
</div>
<div class="bsk-alert bsk-alert-solid bsk-alert-info" role="alert">
  <i class="far fa-info-square bsk-alert-icon" aria-hidden="true"></i> Info alert
</div>

Styles

Solid

<div class="bsk-alert bsk-alert-solid bsk-alert-success" role="alert">
Solid (success) alert
</div>

Outline

<div class="bsk-alert bsk-alert-outline bsk-alert-success" role="alert">
Solid (success) alert
</div>

Highlight

<div class="bsk-alert bsk-alert-highlight bsk-alert-success" role="alert">
Solid (success) alert
</div>

Components

Use the .bsk-alert-link class for any <a> elements within an alert.

<div class="bsk-alert bsk-alert-solid bsk-alert-success" role="alert">Alert with a <a href="#" class="bsk-alert-link">link</a></div>

Dismissible alerts

Add a <button> element using the close icon, to create an alert that can be closed or dismissed.

Dismissible alerts require the alert JavaScript plugin, which is enabled on this site.

The close button element should use a <button> element, not a <a> element, for browser compatibility.

A dismissible alert 
<div class="bsk-alert bsk-alert-success bsk-alert-solid">
  A dismissible alert
  <button class="bsk-alert-close float-right"><i class="bsk-alert-icon fa-fw fas fa-times mt-1" aria-hidden="true"></i></button>
</div>

Block alerts

Where an alert will contain more than just text, such as lists or buttons, etc. add the .bsk-alert-block class to ensure compatibility and correct formatting.

Using an alert with more than just text without this class is not supported and may not look right. browser compatibility.

<div class="bsk-alert bsk-alert-block bsk-alert-solid bsk-alert-success" role="alert">
<p>Longer success text - De carne animata corpora quaeritis. De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium.</p>
<ul>
  <li>the voodoo sacerdos flesh eater</li>
  <li>suscitat mortuos comedere carnem virus</li>
  <li>aenean a dolor plan et terror soulless vulnerum contagium accedunt</li>
  <li>mortui iam vivam unlife</li>
</ul>
</div>

Block alert headings

A heading can be added to a block alert using a .bsk-alert-heading header and h4 heading.

The alert body should use the .bsk-alert-body class for proper formatting.

Other headings may be used, but are not supported and may not look right.

<div class="bsk-alert bsk-alert-block bsk-alert-solid bsk-alert-success" role="alert">
<header>
  <h4 class="text-white">Success alert header</h4>
</header>
<div class="bsk-alert-body">
  <p>Longer success text - De carne animata corpora quaeritis. De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium.</p>
  <ul>
    <li>the voodoo sacerdos flesh eater</li>
    <li>suscitat mortuos comedere carnem virus</li>
    <li>aenean a dolor plan et terror soulless vulnerum contagium accedunt</li>
    <li>mortui iam vivam unlife</li>
  </ul>
</div>
</div>

Sizes

Add one of these classes to alter the size of an alert:

Alert Size Alert Size Class
Large .bsk-alert-lg
Small .bsk-alert-sm 

<div class="bsk-alert bsk-alert-lg bsk-alert-solid bsk-alert-success" role="alert">
  Large (success) alert
</div>
<div class="bsk-alert bsk-alert-solid bsk-alert-success" role="alert">
  Regular (success) alert
</div>
<div class="bsk-alert bsk-alert-sm bsk-alert-solid bsk-alert-success" role="alert">
  Regular (success) alert
</div>

Layouts

Static top

Add the sticky class with a top-<number> class to create a full-width alert that scrolls with the page.


The example below does not work on this page

<div class="bsk-alert bsk-alert-solid bsk-alert-success sticky top-0" role="alert">
Alert static top
</div>