<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 ----------> <div class="col-md-1"></div> <div class="col-md-8 padding-top-10"> <div class="notif-extended"> <div> <p class="notify-count-green">You have 5 new messages</p> </div> <div class="notif-message"> <a href="#"> <span class="fa fa-clock-o fa-fw"></span> <span class="notif-subject"> <span class="notif-subject-from">Jenika Macaso</span> </span> <span class="notif-subject-message padding-right-10"> subscribed to your newsletter. <span class="label label-danger pull-right">25 MAR 2015</span> </span> </a> </div> </div> </div> </div>

.notif-extended { border: medium none !important; border-radius: 4px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.176) !important; max-width: 300px !important; min-width: 160px !important; padding: 0; top: 42px; width: 235px !important; } .notify-arrow-green { border-bottom-color: #68dff0 !important; border-left-color: rgba(0, 0, 0, 0); border-right-color: rgba(0, 0, 0, 0); border-top-color: #68dff0 !important; } .notify-arrow { border-style: solid; border-width: 0 9px 9px; height: 0; left: 7px; margin-top: 10px; opacity: 1; position: absolute; top: -18px; transition: all 0.25s ease 0s; width: 0; z-index: 10; } .notify-count-green { background-color: #68dff0; color: #ffffff; padding: 5px; } .notif-subject { display: block; } .notif-subject-from { font-size: 12px; font-weight: 600; } .notif-subject-time { font-size: 11px; font-style: italic; font-weight: bold; position: absolute; right: 5px; } .notif-subject-message { display: block !important; font-size: 11px; text-align: left; } .notif-message { padding-left: 10px; padding-bottom: 10px; padding-top: 5px; border-bottom: 1px solid #f1f1f1; } .padding-right-10 { padding-right: 10px; }