Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Examples

Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight required contextual classes (e.g., .alert .success). For inline dismissal, use the alerts jQuery plugin.


<link href="https://laarmwork.arnaudjacques.fr/res/css/alert.css" rel="stylesheet">
<link href="https://laarmwork.arnaudjacques.fr/res/css/button.css" rel="stylesheet">
<script src="https://laarmwork.arnaudjacques.fr/res/js/laarmwork.js"></script>
            
A simple success alert
A simple danger alert
A simple warning alert
A simple primary alert
A simple info alert
A simple light alert
A simple secondary alert
A simple dark alert

<div class="alert success m-b-1">
    A simple success alert
</div>
<div class="alert danger">
    A simple danger alert
</div>
<div class="alert warning">
    A simple warning alert
</div>
<div class="alert primary">
    A simple primary alert
</div>
<div class="alert info">
    A simple info alert
</div>
<div class="alert light">
    A simple light alert
</div>
<div class="alert secondary">
    A simple secondary alert
</div>
<div class="alert dark">
    A simple dark alert
</div>
            

Link color

A simple success alert with an example link. Give it a click if you like.
A simple danger alert with an example link. Give it a click if you like.
A simple warning alert with an example link. Give it a click if you like.
A simple primary alert with an example link. Give it a click if you like.
A simple info alert with an example link. Give it a click if you like.
A simple light alert with an example link. Give it a click if you like.
A simple secondary alert with an example link. Give it a click if you like.
A simple dark alert with an example link. Give it a click if you like.

<div class="alert success">
    A simple success alert with <a href="#">an example link</a>. Give it a click if you like.
</div>
<div class="alert danger">
    A simple danger alert with <a href="#">an example link</a>. Give it a click if you like.
</div>
<div class="alert warning">
    A simple warning alert with <a href="#">an example link</a>. Give it a click if you like.
</div>
<div class="alert primary">
    A simple primary alert with <a href="#">an example link</a>. Give it a click if you like.
</div>
<div class="alert info">
    A simple info alert with <a href="#">an example link</a>. Give it a click if you like.
</div>
<div class="alert light">
    A simple light alert with <a href="#">an example link</a>. Give it a click if you like.
</div>
<div class="alert secondary">
    A simple secondary alert with <a href="#">an example link</a>. Give it a click if you like.
</div>
<div class="alert dark">
    A simple dark alert with <a href="#">an example link</a>. Give it a click if you like.
</div>
            

Additional content

Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.


Whenever you need to, be sure to use margin utilities to keep things nice and tidy.


<div class="alert success m-b-1">
    <h4 class="m-t-no">Well done!</h4>
    <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
    <hr />
    <p class="m-b-no">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
            

Dismissing

Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

A simple success alert with an example link. Give it a click if you like.

<div class="alert danger m-b-1">
    A simple success alert with <a href="#">an example link</a>. Give it a click if you like.
    <button class="close" data-dismiss="alert" aria-label="Close">
        &times;
    </button>
</div>