"Flat Responsive Dashboard Design"
Bootstrap 3.3.0 Snippet by datnt15

<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 ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"> <body class="home"> <div class="container-fluid display-table"> <div class="row display-table-row"> <div class="col-md-2 col-sm-1 hidden-xs display-table-cell v-align box" id="navigation"> <div class="logo"> <a hef="home.html"> <img src="http://jskrishna.com/work/merkury/images/logo.png" alt="merkery_logo" class="hidden-xs hidden-sm"> <img src="http://jskrishna.com/work/merkury/images/circle-logo.png" alt="merkery_logo" class="visible-xs visible-sm circle-logo"> </a> </div> <div class="navi"> <ul> <li class="active"><a href="#"><i class="fa fa-home" aria-hidden="true"></i><span class=" hidden-sm">Home</span></a></li> <li><a href="#"><i class="fa fa-tasks" aria-hidden="true"></i><span class=" hidden-sm">Workflow</span></a></li> <li><a href="#"><i class="fa fa-bar-chart" aria-hidden="true"></i><span class="hidden-sm">Statistics</span></a></li> <li><a href="#"><i class="fa fa-user" aria-hidden="true"></i><span class=" hidden-sm">Calender</span></a></li> <li><a href="#"><i class="fa fa-calendar" aria-hidden="true"></i><span class="hidden-sm">Users</span></a></li> <li><a href="#"><i class="fa fa-cog" aria-hidden="true"></i><span class="hidden-sm">Setting</span></a></li> </ul> </div> </div> <div class="col-md-10 col-sm-11 display-table-cell v-align"> <div class="user-dashboard"> <h1>Hello, JS</h1> <div class="row"> </div> </div> </div> </div> </div> </body>
/*Main CSS*/ li,ul{ list-style: none; padding: 0; margin: 0; } /*Home Page*/ .home { background: #f6f7fa; } #navigation { background: #0e1a35; } #navigation { padding: 0; } .display-table { display: table; padding: 0; height: 100%; width: 100%; } .display-table-row { display: table-row; height: 100%; } .display-table-cell { display: table-cell; float: none; height: 100%; } .v-align { vertical-align: top; } .logo img { max-width: 180px; padding: 16px 0 17px; width: 100%; } .icon-info { position: relative; } .navi i { font-size: 20px; } .label.label-primary { border-radius: 50%; font-size: 9px; left: 8px; position: absolute; top: -9px; } .icon-info .label { border: 2px solid #ffffff; font-weight: 500; padding: 3px 5px; text-align: center; } .view { background: #5584ff none repeat scroll 0 0; border-radius: 100px; color: #ffffff; display: inline-block; font-size: 14px; font-weight: 600; margin-top: 10px; padding: 10px 15px; } .navbar-content > span { font-size: 13px; font-weight: 700; } .img-responsive { width: 100%; } #navigation{ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .logo { text-align: center; } .navi a { border-bottom: 1px solid #0d172e; border-top: 1px solid #0d172e; color: #ffffff; display: block; font-size: 17px; font-weight: 500; padding: 28px 20px; text-decoration: none; } .navi i { margin-right: 15px; color: #5584ff; } .navi .active a { background: #122143; border-left: 5px solid #5584ff; padding-left: 15px; } .navi a:hover { background: #122143 none repeat scroll 0 0; border-left: 5px solid #5584ff; display: block; padding-left: 15px; } .navbar-default { background-color: #ffffff; border-color: #ffffff; } .navbar-toggle { border: none; } .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover { background-color: rgba(0, 0, 0, 0); } .navbar-default .navbar-toggle .icon-bar { background-color: #0e1a35; } .circle-logo { margin: 0 auto; max-width: 30px !important; text-align: center; } .hidden-xs{ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .user-dashboard { padding: 0 20px; } .user-dashboard h1 { color: #0e1a35; font-size: 30px; font-weight: 500; margin: 0; padding: 21px 0; } @media only screen and (max-device-width: 767px) { .tab-content .tab-pane { padding: 20px 0; } #navigation .navi a { font-size: 14px; padding: 20px; text-align: center; } #navigation .navi i { margin-right: 0px; } #navigation .navi a:hover, #navigation .navi .active a { background: #122143 none repeat scroll 0 0; border-left: none; display: block; padding-left: 20px; } button, html [type="button"], [type="reset"], [type="submit"] { outline: none; } } @media only screen and (max-device-width: 992px) { .logo img { max-width: 125px !important; } } @media only screen and (min-device-width: 767px) and (max-device-width: 998px){ } @media only screen and (min-device-width:998px) and (max-device-width: 1350px){ #navigation .logo img { max-width: 130px; padding: 16px 0 17px; width: 100%; } }
$(document).ready(function(){ $('.navi ul li').click(function(){ $(".active").removeClass("active"); $(this).toggleClass("active"); }); });

Related: See More


Questions / Comments: