"Flat Responsive Dashboard Design"
Bootstrap 3.3.0 Snippet by js.krishna

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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-xs hidden-sm">Home</span></a></li>
<li><a href="#"><i class="fa fa-tasks" aria-hidden="true"></i><span class="hidden-xs hidden-sm">Workflow</span></a></li>
<li><a href="#"><i class="fa fa-bar-chart" aria-hidden="true"></i><span class="hidden-xs hidden-sm">Statistics</span></a></li>
<li><a href="#"><i class="fa fa-user" aria-hidden="true"></i><span class="hidden-xs hidden-sm">Calender</span></a></li>
<li><a href="#"><i class="fa fa-calendar" aria-hidden="true"></i><span class="hidden-xs hidden-sm">Users</span></a></li>
<li><a href="#"><i class="fa fa-cog" aria-hidden="true"></i><span class="hidden-xs hidden-sm">Setting</span></a></li>
</ul>
</div>
</div>
<div class="col-md-10 col-sm-11 display-table-cell v-align">
<!--<button type="button" class="slide-toggle">Slide Toggle</button> -->
<div class="row">
<header>
<div class="col-md-7">
<nav class="navbar-default pull-left">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="offcanvas" data-target="#side-menu" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*Main CSS*/
/*Login Signup Page*/
a:focus,a:hover,a{
outline:none;
text-decoration: none;
}
li,ul{
list-style: none;
padding: 0;
margin: 0;
}
.header-top i {
font-size: 18px;
}
.bg-image {
background: url(../images/background-login.jpg) no-repeat 0 0 / cover;
position: relative;
width: 100%;
height: 100vh;
display: table;
}
.login-header {
display: inline-block;
width: 100%;
background: #0e1a35;
}
.login-signup {
display: table-cell;
vertical-align: middle;
width: 100%;
}
.login-logo img {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
$(document).ready(function(){
$('[data-toggle="offcanvas"]').click(function(){
$("#navigation").toggleClass("hidden-xs");
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

How to make the Add Project pop up responsive?

mugdha () - 3 years ago - Reply 0


How to make the Add Project pop up responsive?

mugdha () - 3 years ago - Reply 0


How to make the Add Project Pop up responsive?

mugdha () - 3 years ago - Reply 0


How to make the Add Project Pop up responsive?

mugdha () - 3 years ago - Reply 0


See here some awesome bootstrap design in my website i am using in it anyone can take example with my website for them....
here is the ref link... and thanks to bootsnipp where i found most beautiful design
http://kalarikendramdelhi.com/

Web Enlance () - 7 years ago - Reply 0


It was very helpful thanks for the info!

Zaffar Ali () - 8 years ago - Reply 0


How to fetch and display content.
i.e When you click "home" the content for home should be fetched and displayed. When clicked on "Statistics" the previous content mus disapper and content for statistics must appear. How to do this?

Wini () - 8 years ago - Reply 0


sidebar navigation toggle not working on responsive.how to solve?

Soumya Ranjan () - 8 years ago - Reply 0


thank for your project . Very helpfull for me.

Husein Indra Kusuma () - 8 years ago - Reply 0


can someone help me to add subitem(submenu) with dropdown?

andi () - 8 years ago - Reply 0


how to make the navbar 100% height?

andi () - 8 years ago - Reply 0


Hi, I did that,

Add to CSS

body {
height: 100%;
width: 100%;
position: absolute;
}

HeroWaar () - 8 years ago - Reply -2


thank you. it works.

andi () - 8 years ago - Reply 0