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");An outline style variant with both border and text have the same color.
<div class="alert alert-outline-primary" role="alert">
This is a primary solid alert — check it out!
</div>| Class | Value |
|---|---|
class="alert alert-outline-{value}"
|
primary | secondary | success | danger | warning | info | dark |
Here is outline alert mixin which allow you to easily create outline alert style by adding your own class and colors.
@mixin template-alert-outline-variant($parent, $background)@include template-alert-outline-variant(".alert-outline-MyColor", "#000000");A solid background style variant with white text and solid color background.
<div class="alert alert-solid-primary" role="alert">
This is a primary solid alert — check it out!
</div>| Class | Value |
|---|---|
class="alert alert-solid-{value}"
|
primary | secondary | success | danger | warning | info | dark |
Here is solid alert mixin which allow you to easily create solid alert style by adding your own class and colors.
@mixin template-alert-solid-variant($parent, $background)@include template-alert-solid-variant(".alert-solid-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 bar topping. Cupcake candy dessert biscuit chocolate halvah bear claw sweet liquorice. Gummies wafer candy canes chocolate lemon drops.
<div class="alert alert-primary alert-dismissible" role="alert">
<h4 class="alert-heading d-flex align-items-center"><span class="alert-icon rounded-circle"><i class="bx bx-coffee"></i></span>Well done :)</h4>
<hr>
<p class="mb-0">Halvah cheesecake toffee. Cupcake jelly cookie chocolate bar topping. Cupcake candy dessert biscuit
chocolate halvah bear claw sweet liquorice. Gummies wafer candy canes chocolate lemon drops.</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="alert-icon rounded-circle"><i class="bx bx-command"></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>