<!-- Notifications Dropdown -->
<div class="dropdown d-inline-block ml-2">
    <button type="button" class="btn btn-sm btn-dual" id="page-header-notifications-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fa fa-fw fa-bell"></i>
        <span class="text-primary">•</span>
    </button>
    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right p-0 border-0 font-size-sm" aria-labelledby="page-header-notifications-dropdown">
        <div class="p-2 bg-primary-dark text-center rounded-top">
            <h5 class="dropdown-header text-uppercase text-white">Notifications</h5>
        </div>
        <ul class="nav-items mb-0">
            <li>
                <a class="text-dark media py-2" href="javascript:void(0)">
                    <div class="mr-2 ml-3">
                        <i class="fa fa-fw fa-check-circle text-success"></i>
                    </div>
                    <div class="media-body pr-2">
                        <div class="font-w600">You have a new follower</div>
                        <span class="font-w500 text-muted">15 min ago</span>
                    </div>
                </a>
            </li>
            <li>
                <a class="text-dark media py-2" href="javascript:void(0)">
                    <div class="mr-2 ml-3">
                        <i class="fa fa-fw fa-plus-circle text-primary"></i>
                    </div>
                    <div class="media-body pr-2">
                        <div class="font-w600">1 new sale, keep it up</div>
                        <span class="font-w500 text-muted">22 min ago</span>
                    </div>
                </a>
            </li>
            <li>
                <a class="text-dark media py-2" href="javascript:void(0)">
                    <div class="mr-2 ml-3">
                        <i class="fa fa-fw fa-times-circle text-danger"></i>
                    </div>
                    <div class="media-body pr-2">
                        <div class="font-w600">Update failed, restart server</div>
                        <span class="font-w500 text-muted">26 min ago</span>
                    </div>
                </a>
            </li>
            <li>
                <a class="text-dark media py-2" href="javascript:void(0)">
                    <div class="mr-2 ml-3">
                        <i class="fa fa-fw fa-plus-circle text-primary"></i>
                    </div>
                    <div class="media-body pr-2">
                        <div class="font-w600">2 new sales, keep it up</div>
                        <span class="font-w500 text-muted">33 min ago</span>
                    </div>
                </a>
            </li>
            <li>
                <a class="text-dark media py-2" href="javascript:void(0)">
                    <div class="mr-2 ml-3">
                        <i class="fa fa-fw fa-user-plus text-success"></i>
                    </div>
                    <div class="media-body pr-2">
                        <div class="font-w600">You have a new subscriber</div>
                        <span class="font-w500 text-muted">41 min ago</span>
                    </div>
                </a>
            </li>
            <li>
                <a class="text-dark media py-2" href="javascript:void(0)">
                    <div class="mr-2 ml-3">
                        <i class="fa fa-fw fa-check-circle text-success"></i>
                    </div>
                    <div class="media-body pr-2">
                        <div class="font-w600">You have a new follower</div>
                        <span class="font-w500 text-muted">42 min ago</span>
                    </div>
                </a>
            </li>
        </ul>
        <div class="p-2 border-top">
            <a class="btn btn-sm btn-light btn-block text-center" href="javascript:void(0)">
                <i class="fa fa-fw fa-arrow-down mr-1"></i> Load More..
            </a>
        </div>
    </div>
</div>
<!-- END Notifications Dropdown -->