Skip to content

Instantly share code, notes, and snippets.

@jesobreira

jesobreira/bootstrap-vertical-grid.css

Forked from metaist/bootstrap-vertical-grid.css
Last active November 21, 2018 05:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jesobreira/2da21db4a73e591c97595b2e348d075d to your computer and use it in GitHub Desktop.
Save jesobreira/2da21db4a73e591c97595b2e348d075d 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
html,body {
height: 100%;
user-select: none;
}
.container-fixed {
bottom: 0;
position: fixed;
left: 0;
right: 0;
top: 0;
}
.container-fixed .col {
height: 100%;
overflow: auto;
}
.row-xs-12 { height: 100% !important; }
.row-xs-11 { height: 91.66666666666666% !important; }
.row-xs-10 { height: 83.33333333333334% !important; }
.row-xs-9 { height: 75% !important; }
.row-xs-8 { height: 66.66666666666666% !important; }
.row-xs-7 { height: 58.333333333333336% !important; }
.row-xs-6 { height: 50% !important; }
.row-xs-5 { height: 41.66666666666667% !important;}
.row-xs-4 { height: 33.33333333333333% !important;}
.row-xs-3 { height: 25% !important; }
.row-xs-2 { height: 16.666666666666664% !important; }
.row-xs-1 { height: 8.333333333333332% !important; }
.vmiddle {
display: flex !important;
vertical-align: middle;
}
.vmiddle * {
margin: auto;
}
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