flexboxgrid2

Responsive

Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md, lg & xl viewport widths.

<div class="row">
    <div class="col-xs-12
                col-sm-8
                col-md-6
                col-lg-4
                col-xl-2">
        <div>Responsive</div>
    </div>
</div>

Fluid

Percent based widths allow fluid resizing of columns and rows.

.col-xs-6 {
  flex-basis: 50%;
}

Simple Syntax

All you need to remember is row, column, content.

<div class="row">
    <div class="col-xs-12">
        <div>12</div>
    </div>
</div>

Offsets

Offset a column

<div class="row">
    <div class="col-xs-offset-3 col-xs-9">
        <div>offset</div>
    </div>
</div>

Auto Width

Add any number of auto sizing columns to a row. Let the grid figure it out.

<div class="row">
    <div class="col-xs">
        <div>auto</div>
    </div>
</div>

Nested Grids

Nest grids inside grids inside grids.

<div class="row">
    <div class="col-xs">
        <div>
            <div class="row">
                <div class="col-xs">
                    <div>auto</div>
                </div>
            </div>
        </div>
    </div>
</div>

Alignment

Add classes to align elements to the start or end of a row as well as the top, bottom, or center of a column

.start-

<div class="row start-xs">
    <div class="col-xs-6">
        <div>
            start
        </div>
    </div>
</div>

.center-

<div class="row center-xs">
    <div class="col-xs-6">
        <div>
            start
        </div>
    </div>
</div>

.end-

<div class="row end-xs">
    <div class="col-xs-6">
        <div>
            end
        </div>
    </div>
</div>

Here is an example of using the modifiers in conjunction to acheive different alignment at different viewport sizes.

<div class="row center-xs end-sm start-lg">
    <div class="col-xs-6">
        <div>
            All together now
        </div>
    </div>
</div>

.top-

<div class="row top-xs">
    <div class="col-xs-6">
        <div>
            top
        </div>
    </div>
</div>

.middle-

<div class="row middle-xs">
    <div class="col-xs-6">
        <div>
            center
        </div>
    </div>
</div>

.bottom-

<div class="row bottom-xs">
    <div class="col-xs-6">
        <div>
            bottom
        </div>
    </div>
</div>

Distribution

Add classes to distribute the contents of a row or column.

.around-

<div class="row around-xs">
    <div class="col-xs-2">
        <div>
            around
        </div>
    </div>
    <div class="col-xs-2">
        <div>
            around
        </div>
    </div>
    <div class="col-xs-2">
        <div>
            around
        </div>
    </div>
</div>

.between-

<div class="row between-xs">
    <div class="col-xs-2">
        <div>
            between
        </div>
    </div>
    <div class="col-xs-2">
        <div>
            between
        </div>
    </div>
    <div class="col-xs-2">
        <div>
            between
        </div>
    </div>
</div>

Reordering

Add classes to reorder columns.

.first-

Forces a column to appear first.

<div class="row">
    <div class="col-xs-2">
        <div>
            1
        </div>
    </div>
    <div class="col-xs-2">
        <div>
            2
        </div>
    </div>
    <div class="col-xs-2 first-xs">
        <div>
            3
        </div>
    </div>
</div>

.last-

Forces a column to appear last.

<div class="row">
    <div class="col-xs-2 last-xs">
        <div>
            1
        </div>
    </div>
    <div class="col-xs-2">
        <div>
            2
        </div>
    </div>
    <div class="col-xs-2">
        <div>
            3
        </div>
    </div>
</div>

.initial-order-

Resets a column to its initial order.

<div class="row">
    <div class="col-xs-2">
        <div>
            1
        </div>
    </div>
    <div class="col-xs-2">
        <div>
            2
        </div>
    </div>
    <div class="col-xs-2 first-xs initial-order-sm">
        <div>
            3
        </div>
    </div>
</div>

Reversing

.reverse

<div class="row reverse">
    <div class="col-xs-2">
        <div>
            1
        </div>
    </div>
    <div class="col-xs-2">
        <div>
            2
        </div>
    </div>
    <div class="col-xs-2">
        <div>
            3
        </div>
    </div>
</div>

Hiding

Add one or more breakpoint modifiers to hide columns based on the viewport.

.hidden-

<div class="row">
    <div class="col-xs">
        <div class="hidden-xs">
            xs
        </div>
    </div>
    <div class="col-xs">
        <div class="hidden-sm">
            sm
        </div>
    </div>
    <div class="col-xs">
        <div class="hidden-md">
            md
        </div>
    </div>
    <div class="col-xs">
        <div class="hidden-lg">
            lg
        </div>
    </div>
    <div class="col-xs">
        <div class="hidden-xl">
            xl
        </div>
    </div>
</div>