"Home"
Bootstrap 3.3.0 Snippet by Bcsilva

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="wrapper home">
<header class="col-sm-12 col-md-12 col-lg-2">
<div class="sidebar-nav row">
<div class="brand-centered">
<a class="navbar-brand" href="#">
<h1>Logo</h1>
</a>
</div>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-brand">Sidebar menu</span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active current"><a href="http://bootsnipp-env.elasticbeanstalk.com/iframe/qgj99">Home</a></li>
<li><a href="http://bootsnipp-env.elasticbeanstalk.com/iframe/1KXgV">Sobre</a></li>
<li><a href="http://bootsnipp-env.elasticbeanstalk.com/iframe/mvlmN">Serviços</a></li>
<li><a href="http://bootsnipp-env.elasticbeanstalk.com/iframe/rvOz6">Contato</a></li>
<li><span>!!!</span></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</header>
<section class="col-md-12 col-lg-10 grids">
<div class="row">
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
header,
section.grids{
max-height:100vh;
overflow-y:hidden;
}
.grids,
.grids .row {
height: 100vh;
background:#000;
}
.brand-centered {
display: block;
position: relative;
/* width: 100%; */
height: 40vh;
line-height: 1em;
margin: 0;
font-size: 12px;
float: none;
}
a.navbar-brand {
position: absolute;
top: 0;
left: 0;
/* bottom: 0; */
/* right: 0; */
/* background: #fff; */
width: 100%;
padding: 30px;
line-height: 1em;
text-align: center;
vertical-align: center;
height: 100%;
text-transform: uppercase;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Kit 2

Questions / Comments: