Alert
<div class="alert alert-primary" role="alert">...</div>
<div class="alert alert-secondary" role="alert">...</div>
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-light" role="alert">...</div>
<div class="alert alert-dark" role="alert">...</div>
<div class="alert alert-outline-primary" role="alert">...</div>
<div class="alert alert-outline-secondary" role="alert">...</div>
<div class="alert alert-outline-success" role="alert">...</div>
<div class="alert alert-outline-danger" role="alert">...</div>
<div class="alert alert-outline-warning" role="alert">...</div>
<div class="alert alert-outline-info" role="alert">...</div>
<div class="alert alert-outline-light" role="alert">...</div>
<div class="alert alert-outline-dark" role="alert">...</div>
<div class="alert alert-light-primary" role="alert"> ...</div>
<div class="alert alert-light-secondary " role="alert"> ... </div>
<div class="alert alert-light-success " role="alert">...</div>
<div class="alert alert-light-danger " role="alert"> ... </div>
<div class="alert alert-light-warning " role="alert"> ... </div>
<div class="alert alert-light-info " role="alert"> ... </div>
<div class="alert alert-light-light " role="alert"> ... </div>
<div class="alert alert-light-dark " role="alert"> ... </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="alert alert-light-border-primary" role="alert"> ... </div>
<div class="alert alert-light-border-secondary" role="alert"> ... </div>
<div class="alert alert-light-border-success" role="alert"> ... </div>
<div class="alert alert-light-border-danger" role="alert"> ... </div>
<div class="alert alert-light-border-warning " role="alert"> ... </div>
<div class="alert alert-light-border-info " role="alert"> ... </div>
<div class="alert alert-light-border-light" role="alert"> ... </div>
<div class="alert alert-light-border-dark" role="alert"> ... </div>
<div class="alert alert-border-primary" role="alert">...</div>
<div class="alert alert-border-secondary" role="alert">...</div>
<div class="alert alert-border-success" role="alert">...</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>
...
</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>
...
</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>
...
</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="https://centric.linqer.me/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="https://centric.linqer.me/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>...</p>
<hr>
<p class="mb-0">...</p>
</div&g
<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>...</p>
<hr>
<p class="mb-0">...lt;/p>
</div&g
<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>...</p>
<hr>
<p class="mb-0">...</p>
</div>
</div>