<li class="nav-item dropdown">
    <a href="#" class="navbar-nav-link dropdown-toggle caret-0" data-toggle="dropdown">
        <i class="icon-git-compare"></i>
        <span class="d-md-none ml-2">Git updates</span>
        <span class="badge badge-pill bg-warning-400 ml-auto ml-md-0">9</span>
    </a>
    <div class="dropdown-menu dropdown-content wmin-md-350">
        <div class="dropdown-content-header">
            <span class="font-weight-semibold">Git updates</span>
            <a href="#" class="text-default"><i class="icon-sync"></i></a>
        </div>
        <div class="dropdown-content-body dropdown-scrollable">
            <ul class="media-list">
                <li class="media">
                    <div class="mr-3">
                        <a href="#" class="btn bg-transparent border-blue-300 text-blue-300 rounded-round border-2 btn-icon"><i class="icon-git-pull-request"></i></a>
                    </div>
                    <div class="media-body">
                        Drop the IE <a href="#">specific hacks</a> for temporal inputs
                        <div class="text-muted font-size-sm">4 minutes ago</div>
                    </div>
                </li>
                <li class="media">
                    <div class="mr-3">
                        <a href="#" class="btn bg-transparent border-orange-300 text-orange-300 rounded-round border-2 btn-icon"><i class="icon-git-commit"></i></a>
                    </div>
                    <div class="media-body">
                        Add full font overrides for popovers and tooltips
                        <div class="text-muted font-size-sm">36 minutes ago</div>
                    </div>
                </li>
                <li class="media">
                    <div class="mr-3">
                        <a href="#" class="btn bg-transparent border-green text-green rounded-round border-2 btn-icon"><i class="icon-git-branch"></i></a>
                    </div>
                    <div class="media-body">
                        <a href="#">Chris Arney</a> created a new <span class="font-weight-semibold">Design</span> branch
                        <div class="text-muted font-size-sm">2 hours ago</div>
                    </div>
                </li>
                <li class="media">
                    <div class="mr-3">
                        <a href="#" class="btn bg-transparent border-pink-300 text-pink-300 rounded-round border-2 btn-icon"><i class="icon-git-merge"></i></a>
                    </div>
                    <div class="media-body">
                        <a href="#">Eugene Kopyov</a> merged <span class="font-weight-semibold">Master</span> and <span class="font-weight-semibold">Dev</span> branches
                        <div class="text-muted font-size-sm">Dec 18, 18:36</div>
                    </div>
                </li>
                <li class="media">
                    <div class="mr-3">
                        <a href="#" class="btn bg-transparent border-blue-300 text-blue-300 rounded-round border-2 btn-icon"><i class="icon-git-pull-request"></i></a>
                    </div>
                    <div class="media-body">
                        Have Carousel ignore keyboard events
                        <div class="text-muted font-size-sm">Dec 12, 05:46</div>
                    </div>
                </li>
            </ul>
        </div>

    </div>
</li>