bootstrap notification dropdown

by Pasit R

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
  <div class="row">
    <nav class="navbar navbar-static-top" role="navigation">
      <ul class="nav navbar-top-links navbar-right">
        <li>
          <a href="#">
            <i class="fa fa-bell"></i>
            <span class="badge badge-unread">3</span>
          </a>
          <!--           <div class="view-unread"> -->
          <ul class="dropdown-menu unread" style="display: inline-block">
            <li>
              <a href="#">
                <div>
                  <i class="fa fa-envelope-o"></i>
                  <strong>New Order</strong>
                  <small>20-Mar-2017 17:14</small>
                </div>
                <div>
                  <span>Shipment ID:</span>
                  <strong>17171001201170123</strong>
                </div>
              </a>
            </li>
            <li>
              <a href="#">
                <div>
                  <i class="fa fa-exclamation-triangle text-danger-light"></i>
                  <strong>Slow Handling Penalty</strong>
                  <small>14-Apr-2017 06:15</small>
                </div>
                <div>
                  <span>Shipment ID:</span>
                  <strong>17171001201170124</strong>
                </div>
              </a>
            </li>
            <li>
              <a href="#">
                <div>
                  <i class="fa fa-exclamation-triangle text-warning-light"></i>
                  <strong>Order Cancelled</strong>
                  <small>15-Mar-2017 19:43</small>
                </div>
                <div>
                  <span>Shipment ID:</span>
                  <strong>17171001201170321</strong>
                </div>

              </a>
            </li>
          </ul>
          <!--       ...

CSS

.navbar .badge-unread {
  background-color: red;
  position: absolute;
  top: 0;
  left: 18px;
}

.text-danger-light {
  color: #ed5565
}

.text-warning-light {
  color: #f8ac59;
}