Bootstrap Alerts

Overview

Bootstrap alerts provide contextual feedback messages for users. They support text of any length and an optional close button.

Basic Alerts

Use the .alert class with contextual classes to create basic alerts:

<div class="alert alert-primary" role="alert">
    This is a primary alert — check it out!
</div>
<div class="alert alert-secondary" role="alert">
    This is a secondary alert — check it out!
</div>
<div class="alert alert-success" role="alert">
    This is a success alert — check it out!
</div>
<div class="alert alert-danger" role="alert">
    This is a danger alert — check it out!
</div>
<div class="alert alert-warning" role="alert">
    This is a warning alert — check it out!
</div>
<div class="alert alert-info" role="alert">
    This is an info alert — check it out!
</div>
<div class="alert alert-light" role="alert">
    This is a light alert — check it out!
</div>
<div class="alert alert-dark" role="alert">
    This is a dark alert — check it out!
</div>

Alerts with Links

Use the .alert-link class to provide matching colored links within alerts:

<div class="alert alert-primary" role="alert">
    This is a primary alert with <a href="#" class="alert-link">an example link</a>. Click to see the effect.
</div>
<div class="alert alert-success" role="alert">
    This is a success alert with <a href="#" class="alert-link">an example link</a>. Click to see the effect.
</div>
<div class="alert alert-danger" role="alert">
    This is a danger alert with <a href="#" class="alert-link">an example link</a>. Click to see the effect.
</div>