Alerts and warnings

Display information and warnings in a clear way.

We operate with four types of information: Info, Warning, Danger and Success. Here they are represented in alerts:

Alert message

<div class="alert alert-info">
    <button type="button" class="close"><i class="icon-close"></i></button>
    <p>Alert message <a href="#" class="alert-link">with link</a>.</p>
</div>
<div class="alert alert-warning">
    <button type="button" class="close"><i class="icon-close"></i></button>
    <p>Alert message <a href="#" class="alert-link">with link</a>.</p>
</div>
<div class="alert alert-danger">
    <button type="button" class="close"><i class="icon-close"></i></button>
    <p>Alert message <a href="#" class="alert-link">with link</a>.</p>
</div>
<div class="alert alert-success">
    <button type="button" class="close"><i class="icon-close"></i></button>
    <p>Alert message <a href="#" class="alert-link">with link</a>.</p>
</div>

Here they are represented in font color:

Font text colors

<p class="text-info">Info text.</p>
<p class="text-warning">Warning text.</p>
<p class="text-danger">Danger text.</p>
<p class="text-success">Success text.</p>

Here they are represented in background color on lines:

Font background colors.

<p class="bg-info">Info line.</p>
<p class="bg-warning">Warning line.</p>
<p class="bg-danger">Danger line.</p>
<p class="bg-success">Success line.</p>

Also panels can represent these types:

Panel colors

<section class="panel panel-info">
    <header class="panel-heading">
        <h2 class="panel-title">[Panel title]</h2>
    </header>
    <div class="panel-body">
        [Content]
    </div>
</section>
<section class="panel panel-warning">
    ...
</section>
<section class="panel panel-danger">
    ...
</section>
<section class="panel panel-success">
    ...
</section>