Bootstrap snippet: Simple admin dashboard home

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: panel,admin,dashboard



<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"> <div class="row"> <div class="col-lg-12"> <h1>Dashboard <small>Statistics Overview</small></h1> <ol class="breadcrumb"> <li class="active"><i class="fa fa-dashboard"></i> Dashboard</li> </ol> <div class="alert alert-success alert-dismissable"> <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button> Use this boxes to fill your dashboard. You can load number of users, activities, logs, Bootstrap 3, Html, Css, Js, etc... </div> </div> </div> <div class="row"> <div class="col-md-3"> <div class="panel panel-default "> <div class="panel-body panel-tw panel-content"> <div class="col-xs-5"> <i class="fa fa-twitter fa-5x"></i> </div> <div class="col-xs-5 text-right"> <i class="fa fa-arrow-circle-right"></i> <p class="alerts-heading tex">1200</p> <p class="alerts-text tex">Followers</p> </div> </div> </div> </div> <div class="col-md-3"> <div class="panel panel-default "> <div class="panel-body panel-fb panel-content"> <div class="col-xs-5"> <i class="fa fa-facebook fa-5x"></i> </div> <div class="col-xs-5 text-right"> <i class="fa fa-arrow-circle-right"></i> <p class="alerts-heading tex ">1234</p> <p class="alerts-text tex">likes</p> </div> </div> </div> </div> <div class="col-md-3"> <div class="panel panel-default "> <div class="panel-body panel-in panel-content"> <div class="col-xs-5"> <i class="fa fa-money fa-5x"></i> </div> <div class="col-xs-5 text-right"> <i class="fa fa-arrow-circle-right"></i> <p class="alerts-heading tex">800</p> <p class="alerts-text tex">Income</p> </div> </div> </div> </div> <div class="col-md-3"> <div class="panel panel-default "> <div class="panel-body panel-dl panel-content"> <div class="col-xs-5"> <i class="fa fa-download fa-5x"></i> </div> <div class="col-xs-5 text-right"> <i class="fa fa-arrow-circle-right"></i> <p class="alerts-heading tex">2000</p> <p class="alerts-text tex">Downloads</p> </div> </div> </div> </div> </div>
.panel-blue{ background:#5bc0de; } .panel-tw{ background:#5bc0de; } .panel-fb { background:#3b5998 } .panel-in{ background:#5cb85c; } .panel-content .fa { color:#ffffff; } .panel-dl{ background:#428bca; } .panel-content p{ font-weight:bold !important; color:#FFFFFF; }
Dey-Dey

Simple admin dashboard home

Dey-Dey
  Jul 4th 2014, 10:41
3.0K Views