Bootstrap snippet: notifications panel

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: alert,panel



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="col-md-4 col-lg-4"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Notifications</h3> </div> <div class="panel-body"> <div class="alert alert-success"> <strong class="default"><i class="fa fa-road"></i> Well done,</strong> You have finished job! <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> </div> <div class="alert alert-info"> <strong class="default"><i class="fa fa-user"></i> John</strong> sent you friend request. <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> </div> <div class="alert alert-warning"> <strong class="default"><i class="fa fa-envelope-o"></i> Sam</strong> sent important mail. <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> </div> <div class="alert alert-danger"> <strong class="default"><i class="fa fa-hdd-o"></i> Server </strong> reported problems. <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> </div> <div class="alert alert-info nomargin"> <strong class="default"><i class="fa fa-money"></i> Received </strong> $1826 from client. <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> </div> </div> </div> </div> <div class="col-md-4 col-lg-4"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Notifications</h3> </div> <div class="panel-body"> <div class="alert alert-info"> <strong class="default"><i class="fa fa-road"></i> Well done,</strong> You have finished job! <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> </div> <div class="alert alert-success"> <strong class="default"><i class="fa fa-user"></i> John</strong> sent you friend request. <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> </div> <div class="alert alert-danger"> <strong class="default"><i class="fa fa-envelope-o"></i> Sam</strong> sent important mail. <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> </div> <div class="alert alert-warning"> <strong class="default"><i class="fa fa-hdd-o"></i> Server </strong> reported problems. <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> </div> <div class="alert alert-info nomargin"> <strong class="default"><i class="fa fa-money"></i> Received </strong> $1826 from client. <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> </div> </div> </div> </div>
body{margin-top:20px;} .panel-default > .panel-heading { color: #333; background-color: #fcfcfc; border-color: #ddd; border-color: rgba(221,221,221,0.85); }
Dey-Dey

notifications panel

Dey-Dey
  Jun 14th, 15:22
1.4K Views