Default Alerts 

<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 © 2020 DesignReset, All rights Reserved .

Coded with