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="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-solid-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 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.
<div class="alert alert-primary alert-dismissible" role="alert">
<h4 class="alert-heading d-flex align-items-center"><span class="alert-icon rounded"><i class="ri-checkbox-circle-line ri-22px"></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.</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.