Alerts

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


Examples

<div class="alert alert-default" role="alert">
    <strong>Default!</strong> This is a default alert—check it out!
</div>

<div class="alert alert-primary" role="alert">
    <strong>Primary!</strong> This is a primary alert—check it out!
</div>

<div class="alert alert-secondary" role="alert">
    <strong>Secondary!</strong> This is a secondary alert—check it out!
</div>

<div class="alert alert-info" role="alert">
    <strong>Info!</strong> This is a info alert—check it out!
</div>

<div class="alert alert-success" role="alert">
    <strong>Success!</strong> This is a success alert—check it out!
</div>

<div class="alert alert-danger" role="alert">
    <strong>Danger!</strong> This is a danger alert—check it out!
</div>

<div class="alert alert-warning" role="alert">
    <strong>Warning!</strong> This is a warning alert—check it out!
</div>

With icon

<div class="alert alert-warning" role="alert">
    <span class="alert-inner--icon"><i class="ni ni-like-2"></i></span>
    <span class="alert-inner--text"><strong>Warning!</strong> This is a warning alert—check it out that has an icon too!</span>
</div>

Dismissing

<div class="alert alert-default alert-dismissible fade show" role="alert">
    <span class="alert-inner--icon"><i class="ni ni-like-2"></i></span>
    <span class="alert-inner--text"><strong>Default!</strong> This is a default alert—check it out!</span>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

<div class="alert alert-primary alert-dismissible fade show" role="alert">
    <span class="alert-inner--icon"><i class="ni ni-like-2"></i></span>
    <span class="alert-inner--text"><strong>Primary!</strong> This is a primary alert—check it out!</span>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

<div class="alert alert-secondary alert-dismissible fade show" role="alert">
    <span class="alert-inner--icon"><i class="ni ni-like-2"></i></span>
    <span class="alert-inner--text"><strong>Secondary!</strong> This is a secondary alert—check it out!</span>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

<div class="alert alert-info alert-dismissible fade show" role="alert">
    <span class="alert-inner--icon"><i class="ni ni-like-2"></i></span>
    <span class="alert-inner--text"><strong>Info!</strong> This is a info alert—check it out!</span>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

<div class="alert alert-success alert-dismissible fade show" role="alert">
    <span class="alert-inner--icon"><i class="ni ni-like-2"></i></span>
    <span class="alert-inner--text"><strong>Success!</strong> This is a success alert—check it out!</span>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

<div class="alert alert-danger alert-dismissible fade show" role="alert">
    <span class="alert-inner--icon"><i class="ni ni-like-2"></i></span>
    <span class="alert-inner--text"><strong>Danger!</strong> This is a danger alert—check it out!</span>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

<div class="alert alert-warning alert-dismissible fade show" role="alert">
    <span class="alert-inner--icon"><i class="ni ni-like-2"></i></span>
    <span class="alert-inner--text"><strong>Warning!</strong> This is a warning alert—check it out!</span>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>