Responsive Grid

Resize your browser to see the column widths change.

For questions regarding this responsive grid, please contact Allison Salas (asalas@bswift.com)


col twelve
col one
col eleven
col two
col ten
col three
col nine
col four
col eight
col five
col seven
col six
col six
col four
col four
col four
col three
col three
col three
col three
col two
col two
col two
col two
col two
col two
col one
col one
col one
col one
col one
col one
col one
col one
col one
col one
col one
col one
HTML

<div class="container"> 
    <div class="row"> 
        <div class="col twelve tablet-full mobile-full">col twelve</div> 
    </div> 
    <div class="row"> 
        <div class="col one tablet-full mobile-full">col one</div> 
        <div class="col eleven tablet-full mobile-full">col eleven</div> 
    </div> 
</div>

Mobile Example

col two mobile-six
col ten mobile-six
HTML

<div class="container">  
    <div class="row"> 
        <div class="col two mobile-six">col two mobile-six</div> 
        <div class="col ten mobile-six">col ten mobile-six</div> 
    </div> 
</div>

Tablet Example

Also an example of a container with padding.

col four tablet-full mobile-full
col eight tablet-full mobile-full
HTML

<div class="container-flexible">  
    <div class="row"> 
        <div class="col four tablet-full mobile-full">col two</div> 
        <div class="col eight tablet-full mobile-full">col ten</div> 
    </div> 
</div>

Vertical Spacing

Examples of vertical spacing based on 8px grid.

row
row-two
row-three
row-four
row-five
HTML

<div class="container"> 
    <div class="row">                   
        <div class="col twelve tablet-full mobile-full">row</div>
    </div>
    <div class="row-two">                   
        <div class="col twelve tablet-full mobile-full">row-two</div>
    </div>
    <div class="row-three">                   
        <div class="col twelve tablet-full mobile-full">row-three</div>
    </div>
    <div class="row-four">                   
        <div class="col twelve tablet-full mobile-full">row-four</div>
    </div>
    <div class="row-five">                   
        <div class="col twelve tablet-full mobile-full">row-five</div>
    </div>
</div>