Alerts Style 1

            
<div class="row mb-5">
<div class="col-md-12">
    <!-- Alerts Style 1 -->
    <h2 class="mb-4">Alerts Style 1</h2>
    <div class="alert-box alert-style-1">
        <div class="alert alert-info alert-dismissible fade show" role="alert">
            <i class="fa fa-info mr-3"></i>
            <strong>Info: User pending action</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div> 
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            <i class="fa fa-warning mr-3"></i>
            <strong>Warning: User pending action</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fa fa-times mr-3"></i>
            <strong>Error: User pending action</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fa fa-check mr-3"></i>
            <strong>Success: User pending action</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    </div>
</div>
</div>

Alerts Style 2

            
<div class="row mb-5">
<div class="col-md-12">
    <!-- Alerts Style 2 -->
    <h2 class="mb-4">Alerts Style 2</h2>
    <div class="alert-box alert-style-2">
        <div class="alert alert-info alert-dismissible fade show" role="alert">
            <i class="fa fa-info mr-3"></i>
            <strong>Info: User pending action</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div> 
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            <i class="fa fa-warning mr-3"></i>
            <strong>Warning: User pending action</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fa fa-times mr-3"></i>
            <strong>Error: User pending action</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fa fa-check mr-3"></i>
            <strong>Success: User pending action</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    </div>
</div>
</div>

Alerts Style 3

            
<div class="row mb-5">
<div class="col-md-12">
    <!-- Alerts Style 3 -->
    <h2 class="mb-4">Alerts Style 3</h2>
    <div class="alert-box alert-style-3">
        <div class="alert alert-info alert-dismissible fade show" role="alert">
            <i class="fa fa-info mr-3"></i>
            <strong>Info: User pending action</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div> 
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            <i class="fa fa-warning mr-3"></i>
            <strong>Warning: User pending action</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fa fa-times mr-3"></i>
            <strong>Error: User pending action</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fa fa-check mr-3"></i>
            <strong>Success: User pending action</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    </div>
</div>
</div>

Alerts Style 4

            
<div class="row mb-5">
<div class="col-md-12">
    <!-- Alerts Style 4 -->
    <h2 class="mb-4">Alerts Style 4</h2>
    <div class="alert-box alert-style-4">
        <div class="alert alert-info alert-dismissible fade show" role="alert">
            <i class="fa fa-info mr-3"></i>
            <strong>Info: User pending action</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div> 
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            <i class="fa fa-warning mr-3"></i>
            <strong>Warning: User pending action</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fa fa-times mr-3"></i>
            <strong>Error: User pending action</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fa fa-check mr-3"></i>
            <strong>Success: User pending action</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    </div>
</div>
</div>

Alerts Style 5

            
<div class="row mb-3">
<div class="col-md-12">
    <!-- Alerts Style 5 -->
    <h2 class="mb-4">Alerts Style 5</h2>
    <div class="alert-box alert-style-5">
        <div class="alert alert-info alert-dismissible fade show" role="alert">
            <div class="alert-icon">
                <i class="fa fa-info mr-3"></i>
            </div>
            <strong>Info: User pending action</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div> 
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            <div class="alert-icon">
                <i class="fa fa-warning mr-3"></i>
            </div>
            <strong>Warning: User pending action</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <div class="alert-icon">
                <i class="fa fa-times mr-3"></i>
            </div>
            <strong>Error: User pending action</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <div class="alert-icon">
                <i class="fa fa-check mr-3"></i>
            </div>
            <strong>Success: User pending action</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    </div>
</div>
</div>
HEADER STYLE
COLOR SCHEMES
Combo 1
Combo 2
Combo 3
Combo 4
Combo 5
Combo 6
Combo 7
Combo 8
Combo 9
Combo 10
Buy Now