<!-- Regular Alert-->
<div class="alert-item reg sm-gutter xs-padding">
    <span class="para-sm-xs"><i class="fas fa-info-circle xs-gutter"></i>This is an info
        alert — check it out!
    </span>
</div>

<!--warning alert-->
<div class="alert-item warning sm-gutter xs-padding">
    <span class="para-sm-xs"><i class="fas fa-exclamation-circle xs-gutter"></i>Seems your
        account is about expire, upgrade now</span>
</div>

<!--danger alert-->
<div class="alert-item danger sm-gutter xs-padding">
    <span class="para-sm-xs"><i class="fas fa-exclamation-circle xs-gutter"></i>There was
        an error processing your request</span>
</div>

<!--success alert -->
<div class="alert-item success sm-gutter xs-padding">
    <span class="para-sm-xs"><i class="fas fa-check-circle xs-gutter"></i>Data uploaded to
        the server. Fire on!</span>
</div>