---
title: Alerts
---
<h1 class="docs--page-header">Alerts</h1>

<p class="docs--page-description">
    Alerts are used to convey detailed and important information to users. This can be form validation messages, or
    breaking product updates.
</p>
<p class="docs--section-description">
    Alerts comes with special rules:
</p>
<ul>
    <li>
        They are optionally dismissable by the user
    </li>
    <li>
        They will never dissapear unless the user explicityly dismisses them
    </li>
    <li>
        They can contain links and actions the users can respond to
    </li>
</ul>
<p class="docs--panel-info">Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.</p>
<div class="alert alert-success" role="alert"> <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>. </div>
<div class="alert alert-info" role="alert"> <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important. </div>
<div class="alert alert-warning" role="alert"> <strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>. </div>
<div class="alert alert-danger" role="alert"> <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again. </div>

<h2 class="docs--section-description">Content in alerts</h2>
<p class="docs--section-description">
    You can put as much content in alerts as you please (although we recommend not to):
</p>
<div class="alert alert-danger" role="alert">
    <strong>Oh snap!</strong>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, veritatis?</p>
    <ul>
        <li>this-happened-1</li>
        <li>this-happened-2</li>
        <li>this-happened-3</li>
        <li>this-happened-4</li>
        <li>this-happened-5</li>
        <li>this-happened-6</li>
    </ul>
    <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</div>

<h2 class="docs--section-description">Dismissable Alerts</h2>
<p class="docs--section-description">
    Make alerts and toasts dismissible by adding the <code>.alert-dismissible</code> class and a close button.
</p>
<div class="alert alert-warning alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

<h2 class="docs--section-description">Alerts & Toasts in Nodes Backends</h2>
<p class="docs--section-description">
    Our default layout in our Laravel Backends has two predefined areas, one for alerts and one for toasts.
    Placing an alert/toast in any of these containers will add some additional styling, but you are free to use alerts where ever you please.
</p>