Provide contextual feedback messages for typical user actions with the handful of available and flexible alert
messages.
Read the official
Bootstrap Documentation for a full list of
instructions
and other options.
Alerts are available for any length of text.
<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-dark" role="alert">
This is a dark alert — check it out!
</div>
Class | Value |
---|---|
class="alert alert-{value}"
|
primary | secondary | success | danger | warning | info | dark |
Here is the theme basic alert mixin which allow you to easily create alert style by adding your own class and colors.
@mixin template-alert-variant($parent, $background)
@include template-alert-variant(".alert-MyColor", "#000000");
Use the .alert-link
utility class to quickly provide matching colored links within any alert.
<div class="alert alert-primary" role="alert">
A simple primary alert with <a href="javascript:void(0);" class="alert-link">an example link</a>. Give it a click if you
like.
</div>
Add .alert-dismissible
class to add close icon to dismiss alert.
Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
Halvah cheesecake toffee. Cupcake jelly cookie chocolate.
<div class="alert alert-primary alert-dismissible" role="alert">
<h6 class="alert-heading d-flex align-items-center fw-bold mb-1">Well done :)</h6>
<p class="mb-0">Halvah cheesecake toffee. Cupcake jelly cookie chocolate.</p>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
</button>
</div>
You can also use icons to different alert variant using additional class of .d-flex
and
.align-items-center
.
<div class="alert alert-primary d-flex" role="alert">
<span class="badge badge-center rounded-pill bg-primary border-label-primary p-3 me-2"><i class="bx bx-command fs-6"></i></span>
<div class="d-flex flex-column ps-1">
<h6 class="alert-heading d-flex align-items-center fw-bold mb-1">For a watch</h6>
<span>This is a primary solid alert — check it out!</span>
</div>
</div>