Default Alerts

<div class="alert alert-light-primary alert-dismissible fade show border-0 mb-4" role="alert">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><svg> ... </svg></button>
    <strong>Primary!</strong> Lorem Ipsum is simply dummy text of the printing.</button>
</div>

Outline Alerts

<div class="alert alert-outline-primary alert-dismissible fade show mb-4" role="alert">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><svg> ... </svg></button>
    <strong>Primary!</strong> Lorem Ipsum is simply dummy text of the printing.
</div>

Solid Alerts

<div class="alert alert-warning alert-dismissible fade show mb-4" role="alert">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><svg> ... </svg></button>
    <strong>Primary!</strong> Lorem Ipsum is simply dummy text of the printing.
</div>

Alerts with icon

<div class="alert alert-icon-left alert-light-primary alert-dismissible fade show mb-4" role="alert">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><svg  data-bs-dismiss="alert"> ... </svg></button>
    <svg> ... </svg>
    <strong>Warning!</strong> Lorem Ipsum is simply dummy printing.
</div>

<div class="alert alert-icon-right alert-light-primary alert-dismissible fade show mb-4" role="alert">
    <svg> ... </svg>
    <strong>Warning!</strong> Lorem Ipsum is simply dummy printing.
</div>

Arrowed Alerts

<div class="alert alert-arrow-left alert-icon-left alert-light-primary mb-4"
role="alert">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><svg> ... </svg></button>
    <svg> ... </svg>
    <strong>Warning!</strong> Lorem Ipsum is simply dummy printing.
</div>

<div class="alert alert-arrow-right alert-icon-right alert-light-primary mb-4"
role="alert">
    <svg> ... </svg>
    <strong>Warning!</strong> Lorem Ipsum is simply dummy printing.
</div>

Custom Alerts

<div class="alert custom-alert-1 alert-dismissible fade show mb-4" role="alert">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><svg> .... </svg></button>
    <div class="media">
        <div class="alert-icon">
            <svg> .... </svg>
        </div>
        <div class="media-body">
            <div class="alert-text">
                <strong>Warning! </strong><span> Lorem Ipsum is simply dummy text of the printing.</span> 
            </div>
            <div class="alert-btn">
                <button type="button" class="btn btn-secondary">Accept</button>
            </div>
        </div>
    </div>
</div>
<div class="alert alert-gradient alert-dismissible fade show mb-4" role="alert">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><svg> ... </svg></button>
    <strong>New!</strong> Alert with gradient.
</div> 
<div class="alert alert-background alert-dismissible fade show mb-4" role="alert">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><svg> ... </svg></button>
    <strong>New!</strong> Alert with background image.
</div>

Copyright © 2022 DesignReset, All rights reserved.

Coded with