"Basic structure for Dashboard widgets"
Bootstrap 3.3.0 Snippet by m1990qasim

Post to Facebook Tweet this

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 ---------->
<div class="mq-wrapper">
<!-- Sidebar -->
<div class="mq-sidebar">
<div class="mq-branding">
<h3>Muhammad Qasim</h3>
</div>
<nav>
<ul class="nav navbar-nav">
<li><a href="#">home</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">about</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">social</a></li>
</ul>
</nav>
</div>
<!-- widgets -->
<div class="mq-container">
<!-- Breadcrums -->
<div class="mq-bread-crumbs">
<ul>
<li><a href="#">dashboard</a></li>
<li><a href="#">main</a></li>
</ul>
</div>
<!-- widget -->
<div class="mq-service-box">
<div class="mq-box-header">
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
/*
Author : Muhammad Qasim;
Designation : Web Developer at xgrid;
Description :Template for Professional resume;
*/
body{
font-size: 8pt;
font-weight: 300;
background: #2d2d2d !important;
color: #fff !important;
text-transform: uppercase;
}
/* Buttons for wesite */
/* Wrapper class */
.mq-wrapper{
width: 100%;
}
/* Sidebar */
.mq-sidebar{
width: 30%;
margin-right: 10px;
float: left;
position: absolute;
height: 100%;
background-color: #1c1c1c;
}
.mq-branding{
width: 100%;
height: 70px;
background: rgb(0, 153, 255);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard Pro
Flat Responsive Dashboard Design
Basic Register Page

Questions / Comments: