Bootstrap snippet: Bootstrap 3 Control Panel admin dashboard

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



<!-- Header --> <div id="top-nav" class="navbar navbar-inverse navbar-static-top"> <div class="container bootstrap snippet"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-toggle"></span> </button> <a class="navbar-brand" href="#">Aplication</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#"> <i class="glyphicon glyphicon-user"></i> Admin <span class="caret"></span></a> <ul id="g-account-menu" class="dropdown-menu" role="menu"> <li><a href="#">My Profile</a></li> <li><a href="#"><i class="glyphicon glyphicon-lock"></i> Logout</a></li> </ul> </li> </ul> </div> </div><!-- /container --> </div> <!-- /Header --> <!-- Main --> <div class="container bootstrap snippet"> <!-- upper section --> <div class="row"> <div class="col-md-3"> <!-- left --> <a href="#"><strong><i class="glyphicon glyphicon-briefcase"></i> Toolbox</strong></a> <hr> <ul class="nav nav-pills nav-stacked"> <li><a href="#"><i class="glyphicon glyphicon-flash"></i> Alerts</a></li> <li><a href="#"><i class="glyphicon glyphicon-link"></i> Links</a></li> <li><a href="#"><i class="glyphicon glyphicon-list-alt"></i> Reports</a></li> <li><a href="#"><i class="glyphicon glyphicon-book"></i> Books</a></li> <li><a href="#"><i class="glyphicon glyphicon-briefcase"></i> Tools</a></li> <li><a href="#"><i class="glyphicon glyphicon-time"></i> Real-time</a></li> <li><a href="#"><i class="glyphicon glyphicon-plus"></i> Advanced..</a></li> </ul> <hr> </div><!-- /span-3 --> <div class="col-md-9"> <!-- column 2 --> <a href="#"><strong><i class="glyphicon glyphicon-dashboard"></i> My Dashboard</strong></a> <hr> <div class="row"> <!-- center left--> <div class="col-md-7"> <div class="well">Inbox Messages <span class="badge pull-right">3</span></div> <hr> <div class="panel panel-default"> <div class="panel-heading"><h4>Processing Status</h4></div> <div class="panel-body"> <small>Complete</small> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" style="width: 72%"> <span class="sr-only">72% Complete</span> </div> </div> <small>In Progress</small> <div class="progress"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> <span class="sr-only">20% Complete</span> </div> </div> <small>At Risk</small> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> <span class="sr-only">80% Complete</span> </div> </div> </div><!--/panel-body--> </div><!--/panel--> </div><!--/col--> <!--center-right--> <div class="col-md-5"> <ul class="nav nav-justified"> <li><a href="#"><i class="glyphicon glyphicon-cog"></i></a></li> <li><a href="#"><i class="glyphicon glyphicon-heart"></i></a></li> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-comment"></i><span class="count">3</span></a><ul class="dropdown-menu" role="menu"><li><a href="#">1. Is there a way..</a></li><li><a href="#">2. Hello, admin. I would..</a></li><li><a href="#"><strong>All messages</strong></a></li></ul></li> <li><a href="#"><i class="glyphicon glyphicon-user"></i></a></li> <li><a title="Add Widget" data-toggle="modal" href="#addWidgetModal"><span class="glyphicon glyphicon-plus-sign"></span></a></li> </ul> <hr> <p> This is a responsive dashboard-style layout that uses <a href="http://www.getbootstrap.com">Bootstrap 3</a>. You can use this template as a starting point to create something more unique. </p> <hr> <div class="btn-group btn-group-justified"> <a href="#" class="btn btn-info col-sm-3"> <i class="glyphicon glyphicon-plus"></i><br> Service </a> <a href="#" class="btn btn-info col-sm-3"> <i class="glyphicon glyphicon-cloud"></i><br> Cloud </a> <a href="#" class="btn btn-info col-sm-3"> <i class="glyphicon glyphicon-cog"></i><br> Tools </a> <a href="#" class="btn btn-info col-sm-3"> <i class="glyphicon glyphicon-question-sign"></i><br> Help </a> </div> </div><!--/col-span-6--> </div><!--/row--> </div><!--/col-span-9--> </div><!--/row--> <!-- /upper section --> </div><!--/container--> <!-- /Main -->
body{margin-top:20px;}
Dey-Dey

Bootstrap 3 Control Panel admin dashboard

Dey-Dey
  May 2nd 2014, 22:30
5.4K Views