Alert
<div class="alert alert-primary" role="alert"> Simple primary alert -check it out </div>
<div class="alert alert-secondary " role="alert"> Simple secondary alert -check it out </div>
<div class="alert alert-success " role="alert"> Simple success alert -check it out </div>
<div class="alert alert-danger " role="alert"> Simple danger alert -check it out </div>
<div class="alert alert-warning " role="alert"> Simple warning alert -check it out </div>
<div class="alert alert-info " role="alert"> Simple info alert -check it out </div>
<div class="alert alert-light " role="alert"> Simple light alert -check it out </div>
<div class="alert alert-dark " role="alert"> Simple dark alert -check it out </div>
<div class="alert alert-outline-primary" role="alert"> outline primary alert -check it out </div>
<div class="alert alert-outline-secondary " role="alert"> outline secondary alert -check it out </div>
<div class="alert alert-outline-success " role="alert"> outline success alert -check it out </div>
<div class="alert alert-outline-danger " role="alert"> outline danger alert -check it out </div>
<div class="alert alert-outline-warning " role="alert"> outline warning alert -check it out </div>
<div class="alert alert-outline-info " role="alert"> outline info alert -check it out </div>
<div class="alert alert-outline-light " role="alert"> outline light alert -check it out </div>
<div class="alert alert-outline-dark " role="alert"> outline dark alert -check it out </div>
<div class="alert alert-light-primary" role="alert"> Light primary color alert with an example link check it </div>
<div class="alert alert-light-secondary " role="alert"> Light secondary color alert with an example link check it </div>
<div class="alert alert-light-success " role="alert"> Light success color alert with an example link check it </div>
<div class="alert alert-light-danger " role="alert"> Light danger color alert with an example link check it </div>
<div class="alert alert-light-warning " role="alert"> Light warning color alert with an example link check it </div>
<div class="alert alert-light-info " role="alert"> Light info color alert with an example link check it </div>
<div class="alert alert-light-light " role="alert"> Light light color alert with an example link check it </div>
<div class="alert alert-light-dark " role="alert"> Light dark color alert with an example link check it </div>
Light-border-primary alert With icons -check it out!
Light-border-secondary alert With icons -check it out!
Light-border-success alert With icons -check it out!
Light-border-danger alert With icons -check it out!
Light-border-warning alert With icons -check it out!
Light-border-info alert With icons -check it out!
Light-border-light alert With icons -check it out!
Light-border-dark alert With icons -check it out!
<div class="light-border-primary" role="alert"> alert -check it out </div>
<div class="light-border-secondary " role="alert"> alert -check it out </div>
<div class="light-border-success " role="alert"> alert -check it out </div>
<div class="light-border-danger " role="alert"> alert -check it out </div>
<div class="light-border-warning " role="alert"> alert -check it out </div>
<div class="light-border-info " role="alert"> alert -check it out </div>
<div class="light-border-light " role="alert"> alert -check it out </div>
<div class="light-border-dark " role="alert"> alert -check it out </div>
<div class="alert alert-border-primary" role="alert">
Alert with left slide border - check out!
</div>
<div class="alert alert-border-secondary" role="alert">
Alert with left slide border - check out!
</div>
<div class="alert alert-border-success" role="alert">
Alert with left slide border - check out!
</div>
Alert with lable icons - check out!
Alert with lable icons - check out!
Alert with lable icons - check out!
<div class="alert alert-label alert-label-primary" role="alert">
<p class="mb-0">
<i class="ti ti-download label-icon label-icon-primary"></i>
Alert with lable icons - check out!
</p>
<div>
<div class="alert alert-label alert-label-secondary" role="alert">
<p class="mb-0">
<i class="ti ti-download label-icon label-icon-secondary"></i>
Alert with lable icons - check out!
</p>
<div>
<div class="alert alert-label alert-label-success" role="alert">
<p class="mb-0">
<i class="ti ti-download label-icon label-icon-success"></i>
Alert with lable icons - check out!
</p>
<div>
We have Cookies! We use it to ensure you get the best experience on our website and service
your order is delayed
New Version is now availble
With this new Version you have accesss to more customization features and file export options.
Under maintenance
Our team is currently checking some errors in this area. We dont't recommend changing any of your settings until the next update.
<div class="alert alert-primary alert-dismissible" role="alert">
<div class="d-flex justify-content-between">
<img src="/diy_templates/bootstrapmb-16149/assets/images/alert/cookie-.png" class="w-35 h-35 me-2" alt="image">
<p class="mb-0">
We have Cookies! We use it to ensure you get the best experience on our website and service
</p>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
<div class="alert alert-label alert-label-success justify-content-between" role="alert">
<p class="mb-0">
<i class="ti ti-garden-cart label-icon label-icon-success"></i>
your order is delayed
</p>
<button type="button" class="btn btn-sm btn-success" data-bs-dismiss="alert"> Accept</button>
</div>
<div class="alert alert-border-info" role="alert">
<h6>
<i class="ti ti-info-circle f-s-18 me-2 text-info"></i>
New Version is now availble
</h6>
<p>
With this new Version you have accesss to more customization features and file export options.
</p>
<div class="text-end">
<a href="" class="link-primary text-d-underline" data-bs-dismiss="alert">Don't allow</a>
<a href="" class="link-primary text-d-underline ms-2">Allow</a>
</div>
</div>
<div class="alert custom-alert p-0" role="alert">
<div class="alert-header">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert-body">
<h4 class="mb-0 text-center mb-3">
<img src="/diy_templates/bootstrapmb-16149/assets/images/alert/warning.png" class="w-40 h-40" alt="image">
Under maintenance
</h4>
<p class="mb-3">
Our team is currently checking some errors in this area.
We dont't recommend changing any of your settings until the next update.
</p>
<div class="text-end">
<button type="button" class="btn btn-warning">Get more info</button>
</div>
</div>
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
<div class="alert alert-primary" role="alert">
<h4 class="alert-heading">Well done! <i class="ti ti-x float-end breadcrumb-start"
data-bs-dismiss="alert"></i></h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run
a bit longer so that you can see how spacing within an alert works with this kind of content.
</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and
tidy.</p>
</div>
<div class="alert alert-secondary" role="alert">
<h4 class="alert-heading">Well done! <i class="ti ti-x float-end breadcrumb-start"
data-bs-dismiss="alert"></i></h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run
a bit longer so that you can see how spacing within an alert works with this kind of content.
</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and
tidy.</p>
</div>
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Well done! <i class="ti ti-x float-end breadcrumb-start"
data-bs-dismiss="alert"></i></h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run
a bit longer so that you can see how spacing within an alert works with this kind of content.
</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and
tidy.</p>
</div>
</div>