Default

<div class="alert alert-primary mb-4" role="alert">
    <button type="button" class="close" data-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 mb-4" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg> ... </svg></button>
    <strong>Primary!</strong> Lorem Ipsum is simply dummy text of the printing.
</div>

Light Alerts

<div class="alert alert-light-warning mb-4" role="alert">
    <button type="button" class="close" data-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 mb-4" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg  data-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 mb-4" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg  data-dismiss="alert"> ... </svg></button>
    <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="close" data-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">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg> ... </svg></button>
    <svg> ... </svg>
    <strong>Warning!</strong> Lorem Ipsum is simply dummy printing.
</div>

Custom Alerts

<div class="alert custom-alert-1 mb-4" role="alert">
    <button type="button" class="close" data-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-default btn-dismiss">Accept</button>
            </div>
        </div>
    </div>
</div>
<div class="alert alert-gradient mb-4" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg> ... </svg></button>
    <strong>New!</strong> Alert with gradient.
</div> 
<div class="alert alert-background mb-4" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg> ... </svg></button>
    <strong>New!</strong> Alert with background image.
</div>

Copyright © 2021 DesignReset, All rights reserved.

Coded with