Default Alerts
Change colours using .alert-{theme-color}
Well done!
KonKon! Lorem ipsum dolor sit amet, ut qui commodo sensibus, id utinam inermis constituto vim. In nam dolorum interesset, per fierent ponderum ea.
Eos aperiri feugiat democritum ne. Link Text
Well done!
Primary! Lorem ipsum dolor sit amet, ut qui commodo sensibus, id utinam inermis constituto vim. In nam dolorum interesset, per fierent ponderum ea.
Eos aperiri feugiat democritum ne. Link Text
Well done!
Success! Lorem ipsum dolor sit amet, ut qui commodo sensibus, id utinam inermis constituto vim. In nam dolorum interesset, per fierent ponderum ea.
Eos aperiri feugiat democritum ne. Link Text
Well done!
Warning! Lorem ipsum dolor sit amet, ut qui commodo sensibus, id utinam inermis constituto vim. In nam dolorum interesset, per fierent ponderum ea.
Eos aperiri feugiat democritum ne. Link Text
Well done!
Danger! Lorem ipsum dolor sit amet, ut qui commodo sensibus, id utinam inermis constituto vim. In nam dolorum interesset, per fierent ponderum ea.
Eos aperiri feugiat democritum ne. Link Text
Well done!
Info! Lorem ipsum dolor sit amet, ut qui commodo sensibus, id utinam inermis constituto vim. In nam dolorum interesset, per fierent ponderum ea.
Eos aperiri feugiat democritum ne. Link Text
Well done!
Light! Lorem ipsum dolor sit amet, ut qui commodo sensibus, id utinam inermis constituto vim. In nam dolorum interesset, per fierent ponderum ea.
Eos aperiri feugiat democritum ne. Link Text
Well done!
Dark! Lorem ipsum dolor sit amet, ut qui commodo sensibus, id utinam inermis constituto vim. In nam dolorum interesset, per fierent ponderum ea.
Eos aperiri feugiat democritum ne. Link Text
Themed Alerts
Themed alerts require a different structure to allow custom icons to work properly.
<div class="alert alert-box alert-konkon alert-dismissible" role="alert">
<div class="alert-box-icon"><span class="ski zmdi zmdi-favorite"></span></div>
<div class="alert-box-body">
<h4 class="alert-heading">Well done!</h4>
<p>Content Here...</p>
</div>
<button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
</div>Alerts with icons
Add .alert-box with .alert-box-icon and .alert-box-body for our custom icon alerts. Icon alerts use flex and require a different html structure.
Well done!
KonKon! Lorem ipsum dolor sit amet, ut qui commodo sensibus, id utinam inermis constituto vim. In nam dolorum interesset, per fierent ponderum ea.
Eos aperiri feugiat democritum ne. Link Text
Well done!
Primary! Lorem ipsum dolor sit amet, ut qui commodo sensibus, id utinam inermis constituto vim. In nam dolorum interesset, per fierent ponderum ea.
Eos aperiri feugiat democritum ne. Link Text
Well done!
Success! Lorem ipsum dolor sit amet, ut qui commodo sensibus, id utinam inermis constituto vim. In nam dolorum interesset, per fierent ponderum ea.
Eos aperiri feugiat democritum ne. Link Text
Well done!
Warning! Lorem ipsum dolor sit amet, ut qui commodo sensibus, id utinam inermis constituto vim. In nam dolorum interesset, per fierent ponderum ea.
Eos aperiri feugiat democritum ne. Link Text
Well done!
Danger! Lorem ipsum dolor sit amet, ut qui commodo sensibus, id utinam inermis constituto vim. In nam dolorum interesset, per fierent ponderum ea.
Eos aperiri feugiat democritum ne. Link Text
Well done!
Info! Lorem ipsum dolor sit amet, ut qui commodo sensibus, id utinam inermis constituto vim. In nam dolorum interesset, per fierent ponderum ea.
Eos aperiri feugiat democritum ne. Link Text
Well done!
Light! Lorem ipsum dolor sit amet, ut qui commodo sensibus, id utinam inermis constituto vim. In nam dolorum interesset, per fierent ponderum ea.
Eos aperiri feugiat democritum ne. Link Text
Well done!
Dark! Lorem ipsum dolor sit amet, ut qui commodo sensibus, id utinam inermis constituto vim. In nam dolorum interesset, per fierent ponderum ea.
Eos aperiri feugiat democritum ne. Link Text
Full Colour Alerts
Add full colour using .bg-*. You may add .text-white when necessary. Use .alert-box-contrast to lighten icon areas (or text color if color-mix is supported).
Well done!
KonKon! Lorem ipsum dolor sit amet, ut qui commodo sensibus, id utinam inermis constituto vim. In nam dolorum interesset, per fierent ponderum ea.
Eos aperiri feugiat democritum ne. Link Text
Well done!
Primary! Lorem ipsum dolor sit amet, ut qui commodo sensibus, id utinam inermis constituto vim. In nam dolorum interesset, per fierent ponderum ea.
Eos aperiri feugiat democritum ne. Link Text
Well done!
Success! Lorem ipsum dolor sit amet, ut qui commodo sensibus, id utinam inermis constituto vim. In nam dolorum interesset, per fierent ponderum ea.
Eos aperiri feugiat democritum ne. Link Text
Well done!
Warning! Lorem ipsum dolor sit amet, ut qui commodo sensibus, id utinam inermis constituto vim. In nam dolorum interesset, per fierent ponderum ea.
Eos aperiri feugiat democritum ne. Link Text
Well done!
Danger! Lorem ipsum dolor sit amet, ut qui commodo sensibus, id utinam inermis constituto vim. In nam dolorum interesset, per fierent ponderum ea.
Eos aperiri feugiat democritum ne. Link Text
Well done!
Info! Lorem ipsum dolor sit amet, ut qui commodo sensibus, id utinam inermis constituto vim. In nam dolorum interesset, per fierent ponderum ea.
Eos aperiri feugiat democritum ne. Link Text
Well done!
Light! Lorem ipsum dolor sit amet, ut qui commodo sensibus, id utinam inermis constituto vim. In nam dolorum interesset, per fierent ponderum ea.
Eos aperiri feugiat democritum ne. Link Text
Well done!
Dark! Lorem ipsum dolor sit amet, ut qui commodo sensibus, id utinam inermis constituto vim. In nam dolorum interesset, per fierent ponderum ea.
Eos aperiri feugiat democritum ne. Link Text
Icon Alerts
Add bg-body text-body border-0 to get a coloured icon with white body and no border. You may also want to use .link-* instead of .alert-link for links.
Border Icon Alerts
Add .bg-body .text-body and .border-* to get a white body with coloured border. You may add .text-bg-* to the .icon element so it matches the border colour.
More Examples
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.
Dismissible element placement
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. A simple alert using .alert-full-color and .bg-white together with Link Text and buttons. This example replaces the close button for the custom "Dismiss" button below.