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

  • Select an option

    Learn more about clone URLs
  • Save jesobreira/2da21db4a73e591c97595b2e348d075d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jesobreira/2da21db4a73e591c97595b2e348d075d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jesobreira revised this gist Nov 21, 2018. 1 changed file with 26 additions and 12 deletions.
    38 changes: 26 additions & 12 deletions bootstrap-vertical-grid.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,8 @@
    html,body {
    height: 100%;
    user-select: none;
    }

    .container-fixed {
    bottom: 0;
    position: fixed;
    @@ -11,15 +16,24 @@
    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%; }
    .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;
    }
  2. @metaist metaist created this gist Nov 24, 2013.
    25 changes: 25 additions & 0 deletions bootstrap-vertical-grid.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    .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%; }
    25 changes: 25 additions & 0 deletions example.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    <!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>