Skip to content

Instantly share code, notes, and snippets.

@thfrei

thfrei/bootstrap-vertical-grid.css

Forked from metaist/bootstrap-vertical-grid.css
Created January 27, 2017 09:44
Show Gist options
  • Save thfrei/82a7932db9cad948481bb0044635fe42 to your computer and use it in GitHub Desktop.
Save thfrei/82a7932db9cad948481bb0044635fe42 to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap vertical grid. For laying out full-screen fixed height webapps.
Raw
bootstrap-vertical-grid.css
.container-fixed {
bottom: 0;
position: fixed;
left: 0;
right: 0;
top: 0;
}
.container-fixed .col {
height: 100%;
overflow: auto;
}
.row-xs-12 { height: 100%; }
.row-xs-11 { height: 91.66666666666666%; }
.row-xs-10 { height: 83.33333333333334%; }
.row-xs-9 { height: 75%; }
.row-xs-8 { height: 66.66666666666666%; }
.row-xs-7 { height: 58.333333333333336%; }
.row-xs-6 { height: 50%; }
.row-xs-5 { height: 41.66666666666667%;}
.row-xs-4 { height: 33.33333333333333%;}
.row-xs-3 { height: 25%; }
.row-xs-2 { height: 16.666666666666664%; }
.row-xs-1 { height: 8.333333333333332%; }
Raw
example.html
<!DOCTYPE html>
<html><head>
<title>Bootstrap Resize Layout</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="bootstrap-vertical-grid.css" />
<style>
.container-fixed { border: 1px solid red; }
.col {
border: 1px solid #ccc;
text-align: center;
}
</style>
</head><body>
<div class="container-fixed">
<div class="row row-xs-2">
<div class="col col-xs-12">North</div>
</div><div class="row row-xs-10">
<div class="col col-xs-3">West</div>
<div class="col col-xs-4">Center</div>
<div class="col col-xs-5">East</div>
</div><div class="row row-xs-1">
<div class="col col-xs-12">South</div>
</div>
</div>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment