Stroyka Admin - eCommerce Dashboard Template

Basic Example #

A basic alert is usually just a highlighted area containing an informational message. Scroll down the page to learn about other alert options.

Example

Hi, I'm a simple alert example. Scroll down to see what I can.

<div class="alert alert-info mb-0" role="alert">
    Hi, I&#x27;m a simple alert example. Scroll down to see what I can.
</div>

Colors #

There are a total of eight color options available. Choose a color that matches the context of the alert.

Example

A simple success alert — check it out!

A simple danger alert — check it out!

A simple warning alert — check it out!

A simple info alert — check it out!

A simple primary alert — check it out!

A simple secondary alert — check it out!

A simple dark alert — check it out!

A simple light alert — check it out!

<div class="alert alert-success" role="alert">A simple success alert — check it out!</div>
<div class="alert alert-danger" role="alert">A simple danger alert — check it out!</div>
<div class="alert alert-warning" role="alert">A simple warning alert — check it out!</div>
<div class="alert alert-info" role="alert">A simple info alert — check it out!</div>
<div class="alert alert-primary" role="alert">A simple primary alert — check it out!</div>
<div class="alert alert-secondary" role="alert">
    A simple secondary alert — check it out!
</div>
<div class="alert alert-dark" role="alert">A simple dark alert — check it out!</div>
<div class="alert alert-light mb-0" role="alert">
    A simple light alert — check it out!
</div>

Link Color #

Use the .alert-link utility class to quickly provide matching colored links within any alert.

Example

A simple success alert with an example link . Give it a click if you like.

A simple danger alert with an example link . Give it a click if you like.

A simple warning alert with an example link . Give it a click if you like.

A simple info alert with an example link . Give it a click if you like.

A simple primary alert with an example link . Give it a click if you like.

A simple secondary alert with an example link . Give it a click if you like.

A simple dark alert with an example link . Give it a click if you like.

A simple light alert with an example link . Give it a click if you like.

<div class="alert alert-success" role="alert">
    A simple success alert with <a href="#" class="alert-link">an example link</a>. Give
    it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
    A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it
    a click if you like.
</div>
<div class="alert alert-warning" role="alert">
    A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give
    it a click if you like.
</div>
<div class="alert alert-info" role="alert">
    A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a
    click if you like.
</div>
<div class="alert alert-primary" role="alert">
    A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give
    it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
    A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give
    it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
    A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a
    click if you like.
</div>
<div class="alert alert-light mb-0" role="alert">
    A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it
    a click if you like.
</div>

Icons #

Use the .alert-sa-has-icon , .alert-sa-icon , and .alert-sa-content classes to add an icon to the alert.

Example

A simple alert with icon.

<div class="alert alert-primary mb-0 alert-sa-has-icon" role="alert">
    <div class="alert-sa-icon">
        <svg
            xmlns="http://www.w3.org/2000/svg"
            width="1em"
            height="1em"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="feather feather-info"
        >
            <circle cx="12" cy="12" r="10"></circle>
            <line x1="12" y1="16" x2="12" y2="12"></line>
            <line x1="12" y1="8" x2="12.01" y2="8"></line>
        </svg>
    </div>
    <div class="alert-sa-content">A simple alert with icon.</div>
</div>

Advanced Content #

Alerts can contain not only just text, but also a composition of headings, paragraphs, etc.

Example

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-success mb-0" role="alert">
    <h4 class="alert-heading">Well done!</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>

Dismissing #

You can let the user dismiss the alert, see the example below:

Example

Holy guacamole! You should check in on some of those fields below.

<div class="alert alert-warning mb-0 alert-dismissible fade show" role="alert">
    <strong>Holy guacamole!</strong> You should check in on some of those fields below.
    <button
        type="button"
        class="sa-close"
        data-bs-dismiss="alert"
        aria-label="Close"
    ></button>
</div>

Card Style #

You can also use an alternate card-like alert style. Just change the style class to the .alert-sa-*-card format.