<a class="nav-link dropdown-toggle dropdown-toggle-nocaret position-relative" data-toggle="dropdown" href="javascript:void();">
    <i class="zmdi zmdi-comment-outline align-middle"></i><span class="bg-danger text-white badge-up">12</span>
</a>
<div class="dropdown-menu dropdown-menu-right">
    <ul class="list-group list-group-flush">
        <li class="list-group-item d-flex justify-content-between align-items-center">New Messages <a href="javascript:void();" class="extra-small-font">Clear All</a></li>
        <li class="list-group-item">
            <a href="javaScript:void();">
                <div class="media">
                    <div class="avatar"><img class="align-self-start mr-3" src="{{ asset('contents/admin') }}/assets/images/avatars/avatar-5.png" alt="user avatar" /></div>

                    <div class="media-body">
                        <h6 class="mt-0 msg-title">Jhon Deo</h6>
                        <p class="msg-info">Lorem ipsum dolor sit amet...</p>
                        <small>Today, 4:10 PM</small>
                    </div>
                </div>
            </a>
        </li>
        <li class="list-group-item text-center"><a href="javaScript:void();">See All Messages</a></li>
    </ul>
</div>
