Bootstrap snippet: panel dashboard widget

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: dashboard



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container bootstrap snippet"> <div class="row"> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="panel panel-dark panel-colorful"> <div class="panel-body text-center"> <p class="text-uppercase mar-btm text-sm">Visit Today</p> <i class="fa fa-users fa-5x"></i> <hr> <p class="h2 text-thin">254,487</p> <small><span class="text-semibold">7%</span> Higher than yesterday</small> </div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="panel panel-danger panel-colorful"> <div class="panel-body text-center"> <p class="text-uppercase mar-btm text-sm">Comments</p> <i class="fa fa-comment fa-5x"></i> <hr> <p class="h2 text-thin">873</p> <small><span class="text-semibold"><i class="fa fa-unlock-alt fa-fw"></i> 154</span> Unapproved comments</small> </div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="panel panel-primary panel-colorful"> <div class="panel-body text-center"> <p class="text-uppercase mar-btm text-sm">New Order</p> <i class="fa fa-shopping-cart fa-5x"></i> <hr> <p class="h2 text-thin">2,423</p> <small><span class="text-semibold"><i class="fa fa-shopping-cart fa-fw"></i> 954</span> Sales in this month</small> </div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="panel panel-info panel-colorful"> <div class="panel-body text-center"> <p class="text-uppercase mar-btm text-sm">Earning</p> <i class="fa fa-dollar fa-5x"></i> <hr> <p class="h2 text-thin">7,428</p> <small><span class="text-semibold"><i class="fa fa-dollar fa-fw"></i> 22,675</span> Total Earning</small> </div> </div> </div> </div> </div>
body{ background:#eee; margin-top:20px; } .panel { box-shadow: 0 2px 0 rgba(0,0,0,0.05); border-radius: 0; border: 0; margin-bottom: 24px; } .panel-dark.panel-colorful { background-color: #3b4146; border-color: #3b4146; color: #fff; } .panel-danger.panel-colorful { background-color: #f76c51; border-color: #f76c51; color: #fff; } .panel-primary.panel-colorful { background-color: #5fa2dd; border-color: #5fa2dd; color: #fff; } .panel-info.panel-colorful { background-color: #4ebcda; border-color: #4ebcda; color: #fff; } .panel-body { padding: 25px 20px; } .panel hr { border-color: rgba(0,0,0,0.1); } .mar-btm { margin-bottom: 15px; } h2, .h2 { font-size: 28px; } .small, small { font-size: 85%; } .text-sm { font-size: .9em; } .text-thin { font-weight: 300; } .text-semibold { font-weight: 600; }
Dey-Dey

panel dashboard widget

Dey-Dey
  Oct 6th 2015, 07:04
2.3K Views