Bootstrap Alerts - Component Snippets
Different types of Bootstrap alert snippets for - success, info, warning, error etc. With our Bootstrap alerts you can give your project that professional touch it needs to look great on the web!. It's really simple to use, just copy the code snippet, paste it into your page and done. You can choose from 16 different types of alerts, success, info, warning and error.
Alert Dark Light
<!-- start single alert -->
<div class="alert alert-dark-light d-flex align-items-center">
<div class="alert-icon">
<i class="lni lni-play"></i>
</div>
<div class="alert-message">
<h5 class="message-title">This is a default message</h5>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Nesciunt a in, ullam. Lorem ipsum dolor sit amet,
consectetur adipisicing.
</p>
</div>
</div>
<!-- end single alert -->.alert {
padding: 32px;
padding-left: 0;
border-radius: 4px;
box-shadow: var(--shadow-2);
position: relative;
overflow: hidden;
}
.alert::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
}
.alert.alert-dismissible {
padding: 12px 48px 12px 0;
}
.alert.alert-dismissible .alert-icon {
padding: 0px 12px 0 36px;
line-height: 1;
}
.alert.alert-dismissible .alert-message h5 {
margin-bottom: 0px;
}
.alert.alert-dismissible .btn-close {
background: none;
padding: 1rem;
}
.alert.alert-dismissible .btn-close:focus-within, .alert.alert-dismissible .btn-close:focus {
box-shadow: none;
}
.alert.alert-dismissible .btn-close.dark i {
color: var(--black);
}
.alert.alert-dismissible .btn-close i {
color: var(--white);
font-weight: 700;
}
.alert .alert-icon {
padding: 32px;
}
.alert .alert-icon i {
font-size: 20px;
font-weight: 700;
}
.alert .alert-message h5 {
font-size: 20px;
font-weight: 700;
margin-bottom: 8px;
}
.alert .alert-message p {
color: var(--black);
opacity: 0.88;
}
.alert.alert-dark-light {
background: var(--light-3);
}
.alert.alert-dark-light::before {
background: var(--dark-1);
}
.alert.alert-dark-light .alert-icon {
color: var(--dark);
}Alert Secondary
<!-- start single alert -->
<div class="alert alert-secondary d-flex align-items-center">
<div class="alert-icon">
<i class="lni lni-play"></i>
</div>
<div class="alert-message">
<h5 class="message-title">This is a default message</h5>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Nesciunt a in, ullam. Lorem ipsum dolor sit amet,
consectetur adipisicing.
</p>
</div>
</div>
<!-- end single alert -->.alert {
padding: 32px;
padding-left: 0;
border-radius: 4px;
box-shadow: var(--shadow-2);
position: relative;
overflow: hidden;
}
.alert::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
}
.alert.alert-dismissible {
padding: 12px 48px 12px 0;
}
.alert.alert-dismissible .alert-icon {
padding: 0px 12px 0 36px;
line-height: 1;
}
.alert.alert-dismissible .alert-message h5 {
margin-bottom: 0px;
}
.alert.alert-dismissible .btn-close {
background: none;
padding: 1rem;
}
.alert.alert-dismissible .btn-close:focus-within, .alert.alert-dismissible .btn-close:focus {
box-shadow: none;
}
.alert.alert-dismissible .btn-close.dark i {
color: var(--black);
}
.alert.alert-dismissible .btn-close i {
color: var(--white);
font-weight: 700;
}
.alert .alert-icon {
padding: 32px;
}
.alert .alert-icon i {
font-size: 20px;
font-weight: 700;
}
.alert .alert-message h5 {
font-size: 20px;
font-weight: 700;
margin-bottom: 8px;
}
.alert .alert-message p {
color: var(--black);
opacity: 0.88;
}
.alert.alert-secondary {
background: var(--secondary);
}
.alert.alert-secondary::before {
background: var(--secondary-dark);
}
.alert.alert-secondary .alert-icon {
color: var(--white);
}
.alert.alert-secondary .alert-message h5 {
color: var(--white);
}
.alert.alert-secondary .alert-message p {
color: var(--white);
}Alert Primary Light
<!-- start single alert -->
<div class="alert alert-primary-light d-flex align-items-center">
<div class="alert-icon">
<i class="lni lni-play"></i>
</div>
<div class="alert-message">
<h5 class="message-title">This is a default message</h5>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Nesciunt a in, ullam. Lorem ipsum dolor sit amet,
consectetur adipisicing.
</p>
</div>
</div>
<!-- end single alert -->.alert {
padding: 32px;
padding-left: 0;
border-radius: 4px;
box-shadow: var(--shadow-2);
position: relative;
overflow: hidden;
}
.alert::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
}
.alert.alert-dismissible {
padding: 12px 48px 12px 0;
}
.alert.alert-dismissible .alert-icon {
padding: 0px 12px 0 36px;
line-height: 1;
}
.alert.alert-dismissible .alert-message h5 {
margin-bottom: 0px;
}
.alert.alert-dismissible .btn-close {
background: none;
padding: 1rem;
}
.alert.alert-dismissible .btn-close:focus-within, .alert.alert-dismissible .btn-close:focus {
box-shadow: none;
}
.alert.alert-dismissible .btn-close.dark i {
color: var(--black);
}
.alert.alert-dismissible .btn-close i {
color: var(--white);
font-weight: 700;
}
.alert .alert-icon {
padding: 32px;
}
.alert .alert-icon i {
font-size: 20px;
font-weight: 700;
}
.alert .alert-message h5 {
font-size: 20px;
font-weight: 700;
margin-bottom: 8px;
}
.alert .alert-message p {
color: var(--black);
opacity: 0.88;
}
.alert.alert-primary-light {
background: var(--primary-light);
}
.alert.alert-primary-light::before {
background: var(--primary);
}
.alert.alert-primary-light .alert-icon {
color: var(--primary);
}Alert Accent
<!-- start single alert -->
<div class="alert alert-accent d-flex align-items-center">
<div class="alert-icon">
<i class="lni lni-play"></i>
</div>
<div class="alert-message">
<h5 class="message-title">This is a default message</h5>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Nesciunt a in, ullam. Lorem ipsum dolor sit amet,
consectetur adipisicing.
</p>
</div>
</div>
<!-- end single alert -->.alert {
padding: 32px;
padding-left: 0;
border-radius: 4px;
box-shadow: var(--shadow-2);
position: relative;
overflow: hidden;
}
.alert::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
}
.alert.alert-dismissible {
padding: 12px 48px 12px 0;
}
.alert.alert-dismissible .alert-icon {
padding: 0px 12px 0 36px;
line-height: 1;
}
.alert.alert-dismissible .alert-message h5 {
margin-bottom: 0px;
}
.alert.alert-dismissible .btn-close {
background: none;
padding: 1rem;
}
.alert.alert-dismissible .btn-close:focus-within, .alert.alert-dismissible .btn-close:focus {
box-shadow: none;
}
.alert.alert-dismissible .btn-close.dark i {
color: var(--black);
}
.alert.alert-dismissible .btn-close i {
color: var(--white);
font-weight: 700;
}
.alert .alert-icon {
padding: 32px;
}
.alert .alert-icon i {
font-size: 20px;
font-weight: 700;
}
.alert .alert-message h5 {
font-size: 20px;
font-weight: 700;
margin-bottom: 8px;
}
.alert .alert-message p {
color: var(--black);
opacity: 0.88;
}
.alert.alert-accent {
background: var(--accent);
}
.alert.alert-accent::before {
background: var(--accent-dark);
}
.alert.alert-accent .alert-icon {
color: var(--white);
}
.alert.alert-accent .alert-message h5 {
color: var(--white);
}
.alert.alert-accent .alert-message p {
color: var(--white);
}Alert Secondary Light
<!-- start single alert -->
<div
class="alert alert-secondary-light d-flex align-items-center"
>
<div class="alert-icon">
<i class="lni lni-play"></i>
</div>
<div class="alert-message">
<h5 class="message-title">This is a default message</h5>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Nesciunt a in, ullam. Lorem ipsum dolor sit amet,
consectetur adipisicing.
</p>
</div>
</div>
<!-- end single alert -->.alert {
padding: 32px;
padding-left: 0;
border-radius: 4px;
box-shadow: var(--shadow-2);
position: relative;
overflow: hidden;
}
.alert::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
}
.alert.alert-dismissible {
padding: 12px 48px 12px 0;
}
.alert.alert-dismissible .alert-icon {
padding: 0px 12px 0 36px;
line-height: 1;
}
.alert.alert-dismissible .alert-message h5 {
margin-bottom: 0px;
}
.alert.alert-dismissible .btn-close {
background: none;
padding: 1rem;
}
.alert.alert-dismissible .btn-close:focus-within, .alert.alert-dismissible .btn-close:focus {
box-shadow: none;
}
.alert.alert-dismissible .btn-close.dark i {
color: var(--black);
}
.alert.alert-dismissible .btn-close i {
color: var(--white);
font-weight: 700;
}
.alert .alert-icon {
padding: 32px;
}
.alert .alert-icon i {
font-size: 20px;
font-weight: 700;
}
.alert .alert-message h5 {
font-size: 20px;
font-weight: 700;
margin-bottom: 8px;
}
.alert .alert-message p {
color: var(--black);
opacity: 0.88;
}
.alert.alert-secondary-light {
background: var(--secondary-light);
}
.alert.alert-secondary-light::before {
background: var(--secondary);
}
.alert.alert-secondary-light .alert-icon {
color: var(--secondary);
}Alert Caution Light
<!-- start single alert -->
<div class="alert alert-caution-light d-flex align-items-center">
<div class="alert-icon">
<i class="lni lni-play"></i>
</div>
<div class="alert-message">
<h5 class="message-title">This is a default message</h5>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Nesciunt a in, ullam. Lorem ipsum dolor sit amet,
consectetur adipisicing.
</p>
</div>
</div>
<!-- end single alert -->.alert {
padding: 32px;
padding-left: 0;
border-radius: 4px;
box-shadow: var(--shadow-2);
position: relative;
overflow: hidden;
}
.alert::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
}
.alert.alert-dismissible {
padding: 12px 48px 12px 0;
}
.alert.alert-dismissible .alert-icon {
padding: 0px 12px 0 36px;
line-height: 1;
}
.alert.alert-dismissible .alert-message h5 {
margin-bottom: 0px;
}
.alert.alert-dismissible .btn-close {
background: none;
padding: 1rem;
}
.alert.alert-dismissible .btn-close:focus-within, .alert.alert-dismissible .btn-close:focus {
box-shadow: none;
}
.alert.alert-dismissible .btn-close.dark i {
color: var(--black);
}
.alert.alert-dismissible .btn-close i {
color: var(--white);
font-weight: 700;
}
.alert .alert-icon {
padding: 32px;
}
.alert .alert-icon i {
font-size: 20px;
font-weight: 700;
}
.alert .alert-message h5 {
font-size: 20px;
font-weight: 700;
margin-bottom: 8px;
}
.alert .alert-message p {
color: var(--black);
opacity: 0.88;
}
.alert.alert-caution-light {
background: var(--caution-light);
}
.alert.alert-caution-light::before {
background: var(--caution);
}
.alert.alert-caution-light .alert-icon {
color: var(--caution);
}Alert Info
<!-- start single alert -->
<div class="alert alert-info d-flex align-items-center">
<div class="alert-icon">
<i class="lni lni-play"></i>
</div>
<div class="alert-message">
<h5 class="message-title">This is a default message</h5>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Nesciunt a in, ullam. Lorem ipsum dolor sit amet,
consectetur adipisicing.
</p>
</div>
</div>
<!-- end single alert -->.alert {
padding: 32px;
padding-left: 0;
border-radius: 4px;
box-shadow: var(--shadow-2);
position: relative;
overflow: hidden;
}
.alert::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
}
.alert.alert-dismissible {
padding: 12px 48px 12px 0;
}
.alert.alert-dismissible .alert-icon {
padding: 0px 12px 0 36px;
line-height: 1;
}
.alert.alert-dismissible .alert-message h5 {
margin-bottom: 0px;
}
.alert.alert-dismissible .btn-close {
background: none;
padding: 1rem;
}
.alert.alert-dismissible .btn-close:focus-within, .alert.alert-dismissible .btn-close:focus {
box-shadow: none;
}
.alert.alert-dismissible .btn-close.dark i {
color: var(--black);
}
.alert.alert-dismissible .btn-close i {
color: var(--white);
font-weight: 700;
}
.alert .alert-icon {
padding: 32px;
}
.alert .alert-icon i {
font-size: 20px;
font-weight: 700;
}
.alert .alert-message h5 {
font-size: 20px;
font-weight: 700;
margin-bottom: 8px;
}
.alert .alert-message p {
color: var(--black);
opacity: 0.88;
}
.alert.alert-info {
background: var(--info);
}
.alert.alert-info::before {
background: var(--info-dark);
}
.alert.alert-info .alert-icon {
color: var(--white);
}
.alert.alert-info .alert-message h5 {
color: var(--white);
}
.alert.alert-info .alert-message p {
color: var(--white);
}Alert Error Light
<!-- start single alert -->
<div class="alert alert-error-light d-flex align-items-center">
<div class="alert-icon">
<i class="lni lni-play"></i>
</div>
<div class="alert-message">
<h5 class="message-title">This is a default message</h5>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Nesciunt a in, ullam. Lorem ipsum dolor sit amet,
consectetur adipisicing.
</p>
</div>
</div>
<!-- end single alert -->.alert {
padding: 32px;
padding-left: 0;
border-radius: 4px;
box-shadow: var(--shadow-2);
position: relative;
overflow: hidden;
}
.alert::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
}
.alert.alert-dismissible {
padding: 12px 48px 12px 0;
}
.alert.alert-dismissible .alert-icon {
padding: 0px 12px 0 36px;
line-height: 1;
}
.alert.alert-dismissible .alert-message h5 {
margin-bottom: 0px;
}
.alert.alert-dismissible .btn-close {
background: none;
padding: 1rem;
}
.alert.alert-dismissible .btn-close:focus-within, .alert.alert-dismissible .btn-close:focus {
box-shadow: none;
}
.alert.alert-dismissible .btn-close.dark i {
color: var(--black);
}
.alert.alert-dismissible .btn-close i {
color: var(--white);
font-weight: 700;
}
.alert .alert-icon {
padding: 32px;
}
.alert .alert-icon i {
font-size: 20px;
font-weight: 700;
}
.alert .alert-message h5 {
font-size: 20px;
font-weight: 700;
margin-bottom: 8px;
}
.alert .alert-message p {
color: var(--black);
opacity: 0.88;
}
.alert.alert-error-light {
background: var(--error-light);
}
.alert.alert-error-light::before {
background: var(--error);
}
.alert.alert-error-light .alert-icon {
color: var(--error);
}Alert Success
<!-- start single alert -->
<div class="alert alert-success d-flex align-items-center">
<div class="alert-icon">
<i class="lni lni-play"></i>
</div>
<div class="alert-message">
<h5 class="message-title">This is a default message</h5>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Nesciunt a in, ullam. Lorem ipsum dolor sit amet,
consectetur adipisicing.
</p>
</div>
</div>
<!-- end single alert -->.alert {
padding: 32px;
padding-left: 0;
border-radius: 4px;
box-shadow: var(--shadow-2);
position: relative;
overflow: hidden;
}
.alert::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
}
.alert.alert-dismissible {
padding: 12px 48px 12px 0;
}
.alert.alert-dismissible .alert-icon {
padding: 0px 12px 0 36px;
line-height: 1;
}
.alert.alert-dismissible .alert-message h5 {
margin-bottom: 0px;
}
.alert.alert-dismissible .btn-close {
background: none;
padding: 1rem;
}
.alert.alert-dismissible .btn-close:focus-within, .alert.alert-dismissible .btn-close:focus {
box-shadow: none;
}
.alert.alert-dismissible .btn-close.dark i {
color: var(--black);
}
.alert.alert-dismissible .btn-close i {
color: var(--white);
font-weight: 700;
}
.alert .alert-icon {
padding: 32px;
}
.alert .alert-icon i {
font-size: 20px;
font-weight: 700;
}
.alert .alert-message h5 {
font-size: 20px;
font-weight: 700;
margin-bottom: 8px;
}
.alert .alert-message p {
color: var(--black);
opacity: 0.88;
}
.alert.alert-success {
background: var(--success);
}
.alert.alert-success::before {
background: var(--success-dark);
}
.alert.alert-success .alert-icon {
color: var(--white);
}
.alert.alert-success .alert-message h5 {
color: var(--white);
}
.alert.alert-success .alert-message p {
color: var(--white);
}Alert Caution
<!-- start single alert -->
<div class="alert alert-caution d-flex align-items-center">
<div class="alert-icon">
<i class="lni lni-play"></i>
</div>
<div class="alert-message">
<h5 class="message-title">This is a default message</h5>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Nesciunt a in, ullam. Lorem ipsum dolor sit amet,
consectetur adipisicing.
</p>
</div>
</div>
<!-- end single alert -->.alert {
padding: 32px;
padding-left: 0;
border-radius: 4px;
box-shadow: var(--shadow-2);
position: relative;
overflow: hidden;
}
.alert::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
}
.alert.alert-dismissible {
padding: 12px 48px 12px 0;
}
.alert.alert-dismissible .alert-icon {
padding: 0px 12px 0 36px;
line-height: 1;
}
.alert.alert-dismissible .alert-message h5 {
margin-bottom: 0px;
}
.alert.alert-dismissible .btn-close {
background: none;
padding: 1rem;
}
.alert.alert-dismissible .btn-close:focus-within, .alert.alert-dismissible .btn-close:focus {
box-shadow: none;
}
.alert.alert-dismissible .btn-close.dark i {
color: var(--black);
}
.alert.alert-dismissible .btn-close i {
color: var(--white);
font-weight: 700;
}
.alert .alert-icon {
padding: 32px;
}
.alert .alert-icon i {
font-size: 20px;
font-weight: 700;
}
.alert .alert-message h5 {
font-size: 20px;
font-weight: 700;
margin-bottom: 8px;
}
.alert .alert-message p {
color: var(--black);
opacity: 0.88;
}
.alert.alert-caution {
background: var(--caution);
}
.alert.alert-caution::before {
background: var(--caution-dark);
}
.alert.alert-caution .alert-icon {
color: var(--white);
}
.alert.alert-caution .alert-message h5 {
color: var(--white);
}
.alert.alert-caution .alert-message p {
color: var(--white);
}Alert Accent Light
<!-- start single alert -->
<div class="alert alert-accent-light d-flex align-items-center">
<div class="alert-icon">
<i class="lni lni-play"></i>
</div>
<div class="alert-message">
<h5 class="message-title">This is a default message</h5>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Nesciunt a in, ullam. Lorem ipsum dolor sit amet,
consectetur adipisicing.
</p>
</div>
</div>
<!-- end single alert -->.alert {
padding: 32px;
padding-left: 0;
border-radius: 4px;
box-shadow: var(--shadow-2);
position: relative;
overflow: hidden;
}
.alert::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
}
.alert.alert-dismissible {
padding: 12px 48px 12px 0;
}
.alert.alert-dismissible .alert-icon {
padding: 0px 12px 0 36px;
line-height: 1;
}
.alert.alert-dismissible .alert-message h5 {
margin-bottom: 0px;
}
.alert.alert-dismissible .btn-close {
background: none;
padding: 1rem;
}
.alert.alert-dismissible .btn-close:focus-within, .alert.alert-dismissible .btn-close:focus {
box-shadow: none;
}
.alert.alert-dismissible .btn-close.dark i {
color: var(--black);
}
.alert.alert-dismissible .btn-close i {
color: var(--white);
font-weight: 700;
}
.alert .alert-icon {
padding: 32px;
}
.alert .alert-icon i {
font-size: 20px;
font-weight: 700;
}
.alert .alert-message h5 {
font-size: 20px;
font-weight: 700;
margin-bottom: 8px;
}
.alert .alert-message p {
color: var(--black);
opacity: 0.88;
}
.alert.alert-accent-light {
background: var(--accent-light);
}
.alert.alert-accent-light::before {
background: var(--accent);
}
.alert.alert-accent-light .alert-icon {
color: var(--accent);
}Alert Success Light
<!-- start single alert -->
<div class="alert alert-success-light d-flex align-items-center">
<div class="alert-icon">
<i class="lni lni-play"></i>
</div>
<div class="alert-message">
<h5 class="message-title">This is a default message</h5>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Nesciunt a in, ullam. Lorem ipsum dolor sit amet,
consectetur adipisicing.
</p>
</div>
</div>
<!-- end single alert -->.alert {
padding: 32px;
padding-left: 0;
border-radius: 4px;
box-shadow: var(--shadow-2);
position: relative;
overflow: hidden;
}
.alert::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
}
.alert.alert-dismissible {
padding: 12px 48px 12px 0;
}
.alert.alert-dismissible .alert-icon {
padding: 0px 12px 0 36px;
line-height: 1;
}
.alert.alert-dismissible .alert-message h5 {
margin-bottom: 0px;
}
.alert.alert-dismissible .btn-close {
background: none;
padding: 1rem;
}
.alert.alert-dismissible .btn-close:focus-within, .alert.alert-dismissible .btn-close:focus {
box-shadow: none;
}
.alert.alert-dismissible .btn-close.dark i {
color: var(--black);
}
.alert.alert-dismissible .btn-close i {
color: var(--white);
font-weight: 700;
}
.alert .alert-icon {
padding: 32px;
}
.alert .alert-icon i {
font-size: 20px;
font-weight: 700;
}
.alert .alert-message h5 {
font-size: 20px;
font-weight: 700;
margin-bottom: 8px;
}
.alert .alert-message p {
color: var(--black);
opacity: 0.88;
}
.alert.alert-success-light {
background: var(--success-light);
}
.alert.alert-success-light::before {
background: var(--success);
}
.alert.alert-success-light .alert-icon {
color: var(--success);
}Alert Dark
<!-- start single alert -->
<div class="alert alert-dark d-flex align-items-center">
<div class="alert-icon">
<i class="lni lni-play"></i>
</div>
<div class="alert-message">
<h5 class="message-title">This is a default message</h5>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Nesciunt a in, ullam. Lorem ipsum dolor sit amet,
consectetur adipisicing.
</p>
</div>
</div>
<!-- end single alert -->.alert {
padding: 32px;
padding-left: 0;
border-radius: 4px;
box-shadow: var(--shadow-2);
position: relative;
overflow: hidden;
}
.alert::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
}
.alert.alert-dismissible {
padding: 12px 48px 12px 0;
}
.alert.alert-dismissible .alert-icon {
padding: 0px 12px 0 36px;
line-height: 1;
}
.alert.alert-dismissible .alert-message h5 {
margin-bottom: 0px;
}
.alert.alert-dismissible .btn-close {
background: none;
padding: 1rem;
}
.alert.alert-dismissible .btn-close:focus-within, .alert.alert-dismissible .btn-close:focus {
box-shadow: none;
}
.alert.alert-dismissible .btn-close.dark i {
color: var(--black);
}
.alert.alert-dismissible .btn-close i {
color: var(--white);
font-weight: 700;
}
.alert .alert-icon {
padding: 32px;
}
.alert .alert-icon i {
font-size: 20px;
font-weight: 700;
}
.alert .alert-message h5 {
font-size: 20px;
font-weight: 700;
margin-bottom: 8px;
}
.alert .alert-message p {
color: var(--black);
opacity: 0.88;
}
.alert.alert-dark {
background: var(--dark-3);
}
.alert.alert-dark::before {
background: var(--dark-1);
}
.alert.alert-dark .alert-icon {
color: var(--white);
}
.alert.alert-dark .alert-message h5 {
color: var(--white);
}
.alert.alert-dark .alert-message p {
color: var(--white);
}Alert Primary
<!-- start single alert -->
<div class="alert alert-primary d-flex align-items-center">
<div class="alert-icon">
<i class="lni lni-play"></i>
</div>
<div class="alert-message">
<h5 class="message-title">This is a default message</h5>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Nesciunt a in, ullam. Lorem ipsum dolor sit amet,
consectetur adipisicing.
</p>
</div>
</div>
<!-- end single alert -->.alert {
padding: 32px;
padding-left: 0;
border-radius: 4px;
box-shadow: var(--shadow-2);
position: relative;
overflow: hidden;
}
.alert::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
}
.alert.alert-dismissible {
padding: 12px 48px 12px 0;
}
.alert.alert-dismissible .alert-icon {
padding: 0px 12px 0 36px;
line-height: 1;
}
.alert.alert-dismissible .alert-message h5 {
margin-bottom: 0px;
}
.alert.alert-dismissible .btn-close {
background: none;
padding: 1rem;
}
.alert.alert-dismissible .btn-close:focus-within, .alert.alert-dismissible .btn-close:focus {
box-shadow: none;
}
.alert.alert-dismissible .btn-close.dark i {
color: var(--black);
}
.alert.alert-dismissible .btn-close i {
color: var(--white);
font-weight: 700;
}
.alert .alert-icon {
padding: 32px;
}
.alert .alert-icon i {
font-size: 20px;
font-weight: 700;
}
.alert .alert-message h5 {
font-size: 20px;
font-weight: 700;
margin-bottom: 8px;
}
.alert .alert-message p {
color: var(--black);
opacity: 0.88;
}
.alert.alert-primary {
background: var(--primary);
}
.alert.alert-primary::before {
background: var(--primary-dark);
}
.alert.alert-primary .alert-icon {
color: var(--white);
}
.alert.alert-primary .alert-message h5 {
color: var(--white);
}
.alert.alert-primary .alert-message p {
color: var(--white);
}Alert Error
<!-- start single alert -->
<div class="alert alert-error d-flex align-items-center">
<div class="alert-icon">
<i class="lni lni-play"></i>
</div>
<div class="alert-message">
<h5 class="message-title">This is a default message</h5>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Nesciunt a in, ullam. Lorem ipsum dolor sit amet,
consectetur adipisicing.
</p>
</div>
</div>
<!-- end single alert -->.alert {
padding: 32px;
padding-left: 0;
border-radius: 4px;
box-shadow: var(--shadow-2);
position: relative;
overflow: hidden;
}
.alert::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
}
.alert.alert-dismissible {
padding: 12px 48px 12px 0;
}
.alert.alert-dismissible .alert-icon {
padding: 0px 12px 0 36px;
line-height: 1;
}
.alert.alert-dismissible .alert-message h5 {
margin-bottom: 0px;
}
.alert.alert-dismissible .btn-close {
background: none;
padding: 1rem;
}
.alert.alert-dismissible .btn-close:focus-within, .alert.alert-dismissible .btn-close:focus {
box-shadow: none;
}
.alert.alert-dismissible .btn-close.dark i {
color: var(--black);
}
.alert.alert-dismissible .btn-close i {
color: var(--white);
font-weight: 700;
}
.alert .alert-icon {
padding: 32px;
}
.alert .alert-icon i {
font-size: 20px;
font-weight: 700;
}
.alert .alert-message h5 {
font-size: 20px;
font-weight: 700;
margin-bottom: 8px;
}
.alert .alert-message p {
color: var(--black);
opacity: 0.88;
}
.alert.alert-error {
background: var(--error);
}
.alert.alert-error::before {
background: var(--error-dark);
}
.alert.alert-error .alert-icon {
color: var(--white);
}
.alert.alert-error .alert-message h5 {
color: var(--white);
}
.alert.alert-error .alert-message p {
color: var(--white);
}Alert Info Light
<!-- start single alert -->
<div class="alert alert-info-light d-flex align-items-center">
<div class="alert-icon">
<i class="lni lni-play"></i>
</div>
<div class="alert-message">
<h5 class="message-title">This is a default message</h5>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Nesciunt a in, ullam. Lorem ipsum dolor sit amet,
consectetur adipisicing.
</p>
</div>
</div>
<!-- end single alert -->.alert {
padding: 32px;
padding-left: 0;
border-radius: 4px;
box-shadow: var(--shadow-2);
position: relative;
overflow: hidden;
}
.alert::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
}
.alert.alert-dismissible {
padding: 12px 48px 12px 0;
}
.alert.alert-dismissible .alert-icon {
padding: 0px 12px 0 36px;
line-height: 1;
}
.alert.alert-dismissible .alert-message h5 {
margin-bottom: 0px;
}
.alert.alert-dismissible .btn-close {
background: none;
padding: 1rem;
}
.alert.alert-dismissible .btn-close:focus-within, .alert.alert-dismissible .btn-close:focus {
box-shadow: none;
}
.alert.alert-dismissible .btn-close.dark i {
color: var(--black);
}
.alert.alert-dismissible .btn-close i {
color: var(--white);
font-weight: 700;
}
.alert .alert-icon {
padding: 32px;
}
.alert .alert-icon i {
font-size: 20px;
font-weight: 700;
}
.alert .alert-message h5 {
font-size: 20px;
font-weight: 700;
margin-bottom: 8px;
}
.alert .alert-message p {
color: var(--black);
opacity: 0.88;
}
.alert.alert-info-light {
background: var(--info-light);
}
.alert.alert-info-light::before {
background: var(--info);
}
.alert.alert-info-light .alert-icon {
color: var(--info);
}