"Adjustable baseline grid test"
Bootstrap 3.3.0 Snippet by ASDAFF

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 ---------->
<link class="cssdeck" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
<link href="//netdna.bootstrapcdn.com/bootswatch/2.3.0/amelia/bootstrap.min.css" rel="stylesheet">
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li>
<a href="#">
Home
</a>
</li>
<li>
<a href="#">
About
</a>
</li>
<li>
<a href="#">
Contact
</a>
</li>
</ul>
<form class="navbar-form pull-right">
<input name="textinput1" type="email" placeholder="Email" class="span2">
<input name="textinput2" type="password" placeholder="Password" class="span2">
<button class="btn">
Sign in
</button>
</form>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
html {
position: relative
}
html:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
display: block;
@include background-size(1em);
@include background-image(linear-gradient(top, rgba(249,252,247,0) 92%,rgba(249,252,247,.2) 95%,rgba(249,252,247,.2) 99%,rgba(94,93,91,.2) 100%));
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Gaia Bootstrap Template
Pinterest-like Responsive Grid
Grid Columns Divider
Bootstrap Editable jQuery Grid

Questions / Comments: