"Notifications by itpixelz"
Bootstrap 3.3.0 Snippet by hdpixelz

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* 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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
https://bootsnipp.com/user/snippets/1BXv3#
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard Angular

Questions / Comments: