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="#" 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.
Sugar plum apple pie sesame snaps croissant marshmallow apple pie liquorice. Cheesecake bear claw tiramisu shortbread cupcake. Sugar plum candy canes jujubes liquorice tiramisu gummi bears muffin dragée gingerbread.
<div class="alert alert-primary alert-dismissible d-flex align-items-baseline" role="alert">
<span class="alert-icon alert-icon-lg text-primary me-2">
<i class="ti ti-user ti-sm"></i>
</span>
<div class="d-flex flex-column ps-1">
<h5 class="alert-heading mb-2">This is a primary alert — check it out!</h5>
<p class="mb-0">Sugar plum apple pie sesame snaps croissant marshmallow apple pie liquorice. Cheesecake bear claw tiramisu shortbread cupcake. Sugar plum candy canes jujubes liquorice tiramisu gummi bears muffin dragée gingerbread.</p>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
</button>
</div>
</div>You can also use icons to different alert variant using additional class of .d-flex and
.align-items-center.