<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<nav class="navbar fixed-top navbar-light bg-faded">
<div class="dropdown nav-button notifications-button hidden-sm-down">
<a class="btn btn-secondary dropdown-toggle" href="#" id="notifications-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i id="notificationsIcon" class="fa fa-bell-o" aria-hidden="true"></i>
<span id="notificationsBadge" class="badge badge-danger"><i class="fa fa-spinner fa-pulse fa-fw" aria-hidden="true"></i></span>
</a>
<div class="dropdown-menu notification-dropdown-menu" aria-labelledby="notifications-dropdown">
<h6 class="dropdown-header">Notifications</h6>
<a id="notificationsLoader" class="dropdown-item dropdown-notification" href="#">
<p class="notification-solo text-center"><i id="notificationsIcon" class="fa fa-spinner fa-pulse fa-fw" aria-hidden="true"></i> Chargement des dernières notifications...</p>
</a>
<div id="notificationsContainer" class="notifications-container"></div>
<a id="notificationAucune" class="dropdown-item dropdown-notification" href="#">
<p class="notification-solo text-center">Aucune nouvelle notification</p>
</a>
<a class="dropdown-item dropdown-notification-all" href="#">
Voir toutes les notifications
</a>