Alerts

A simple static fixed alert box. (alert)
A simple static fixed alert box. (alert alert-success)
A simple static fixed alert box. (alert alert-danger)
A simple static fixed alert box. (alert alert-warning)
A simple static fixed alert box. (alert alert-info)
this alert disappears automatically after 10 seconds (alert alert-timeout)

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.

Code HTML
Classic alert

    <div class="alert">
        <span class="_close"></span>
            A simple static fixed alert box.
    </div>
Specific alert

    <div class="alert-success">
        <span class="_close"></span>
            A simple success alert box.
    </div>
More complex alert

    <div class="alert alert-xl">
        <span class="_close"></span>
        <h4 class="text-blue-gray-100">Well done!</h4>
        <p class="font-light text-blue-gray-200">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="font-light text-blue-gray-200">Whenever you need to, be sure to use margin 
        utilities to keep things nice and tidy.</p>
    </div>