<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <li class="dropdown"> <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"> <i class="glyphicon glyphicon-bell"></i> </a> <ul class="dropdown-menu notifications" role="menu" aria-labelledby="dLabel"> <div class="notification-heading"><h4 class="menu-title">Notifications</h4><h4 class="menu-title pull-right">View all<i class="glyphicon glyphicon-circle-arrow-right"></i></h4> </div> <div class="notifications-wrapper"> <a class="content" href="#"> <div class="notification-item"> <img src="http://www.leapcms.com/images/100pixels1.gif"> <h4 class="item-title">Evaluation Deadline <small> 1 day ago</small></h4> <p class="item-info">Mr hassan has followed you!</p> </div> </a> <a class="content" href="#"> <div class="notification-item"> <img src="http://www.leapcms.com/images/100pixels1.gif"> <h4 class="item-title">Evaluation Deadline <small> 1 day ago</small></h4> <p class="item-info">Marketing 101, Video Assignment</p> </div> </a> <a class="content" href="#"> <div class="notification-item"> <img src="http://www.leapcms.com/images/100pixels1.gif"> <h4 class="item-title">Evaluation Deadline <small> 1 day ago</small></h4> <p class="item-info">Mr hassan has followed you!</p> </div> </a> <a class="content" href="#"> <div class="notification-item"> <img src="http://www.leapcms.com/images/100pixels1.gif"> <h4 class="item-title">Evaluation Deadline <small> 1 day ago</small></h4> <p class="item-info">Mr hassan has followed you!</p> </div> </a> <a class="content" href="#"> <div class="notification-item"> <img src="http://www.leapcms.com/images/100pixels1.gif"> <h4 class="item-title">Evaluation Deadline <small> 1 day ago</small></h4> <p class="item-info">Mr hassan has followed you!</p> </div> </a> </div> </ul> </li>

/* CSS used here will be applied after bootstrap.css */ .glyphicon-bell { font-size:1.5rem; } .notifications { min-width:320px; } .notifications-wrapper { overflow:auto; max-height:250px; } .menu-title { color: #ffffff; font-size: 13px; display: inline-block; font-weight: bold; } .glyphicon-circle-arrow-right { margin-left:10px; } .notification-heading, .notification-footer { padding:2px 10px; } .dropdown-menu.divider { margin:5px 0; } .item-title { font-size: 1.3rem; color: #000; font-weight: bold; margin: 5px 0px; } .notifications a.content { text-decoration: none; display: block; color:#000; } .notification-item { position: relative; padding: 10px; padding-left: 70px; padding-bottom: 0px; } .notification-item img { position: absolute; top: 7px; left: 10px; width: 50px; height: 50px; border-radius: 50px; } .dropdown-menu .divider { height: 1px; margin: 5px 0; overflow: hidden; background-color: #e5e5e5; } ul.dropdown-menu.notifications .notifications-wrapper a.content { padding: 0px !important; background: rgba(0, 0, 0, 0.04); border-bottom: 1px solid #d1d1d1; } ul.dropdown-menu.notifications .notifications-wrapper a.content:hover { color: #000; background: rgba(0, 0, 0, 0.1); } .login-nav ul.nav.navbar-nav.navbar-right li a { display: block; } .notification-heading { background: #000;.notifications a.content { text-decoration: none; display: block; } padding: 3px 10px; } ul.dropdown-menu.notifications { padding: 0px; } .dropdown .glyphicon-bell { vertical-align: middle; } .dropdown{ list-style:none; }

https://bootsnipp.com/user/snippets/1BXv3#