Fluid container

Fluid container is fill all the available space what is available for it. The strcture is same like in Bootstrap or other frameworks .container inside a .row and inside of that .col. The .box-row class is just for testing purpose you don't need to use it.

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-1-2">
                <div class="box-row">
                    1-2
                </div>
            </div>
            <div class="col-md-1-2">
                <div class="box-row">
                    1-2
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-1-3">
                <div class="box-row">
                    1-3
                </div>
            </div>
            <div class="col-md-1-3">
                <div class="box-row">
                    1-3
                </div>
            </div>
            <div class="col-md-1-3">
                <div class="box-row">
                    1-3
                </div>
            </div>
        </div>
    </div>

Container with cols

You can use any kind of col size between 1-12 NOT just some parts of the 12, like 2-12. So you can use 5-6, 2-9 etc.

<div class="row">
    <div class="col-md-1-2">
        <div class="box-row">
            1-2
        </div>
    </div>
    <div class="col-md-1-2">
        <div class="box-row">
            1-2
        </div>
    </div>
</div>

Container with cols and no gutter

No gutter means you do not use the paddings and the margins on the col elements. You can achieve this with the .no-gutter class on the .row elements.

<div class="row no-gutter">
    <div class="col-md-1-2">
        <div class="box-row">
            1-2
        </div>
    </div>
    <div class="col-md-1-22">
        <div class="box-row">
            1-2
        </div>
    </div>
</div>

Nested grids

You can nest in any deepness the .row and the .col elements.

Offset cols

Offset element are elements what a specified width element before an element inside a logical row. You can use any kind of .offset inside a .row

    <div class="row">
        <div class="col-xs-offset-1-12 col-xs-11-12">
            <div class="box-row">1-12 # 11-12</div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-offset-2-11 col-xs-5-9">
            <div class="box-row">2-11 # 5-9</div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-offset-3-10 col-xs-1-4">
            <div class="box-row">3-10 # 1-4</div>
        </div>
    </div>

Pull cols

Like with the offset element just the opposite way. In this case we use negative margins to achieve this behavior. You can use any kind of .pull inside a .row

    <div class="row">
        <div class="col-xs-pull-1-12 col-xs-1-2">
            <div class="box-row">1-12 # 1-2</div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-pull-1-8 col-xs-5-7">
            <div class="box-row">1-8 | 5-7</div>
        </div>
    </div>

Alignments - horizontal

You can use the flexbox horizontal alignments for any kind of .col. You can use the .flex-start .flex-center .flex-end classes on the .row.

    <div class="row flex-start">
        <div class="col-xs-1-2">
            <div class="box-row">start</div>
        </div>
    </div>
    <div class="row flex-center">
        <div class="col-xs-1-2">
            <div class="box-row">center</div>
        </div>
    </div>
    <div class="row flex-end">
        <div class="col-xs-1-2">
            <div class="box-row">end</div>
        </div>
    </div>

Alignments - vertical

You can use the flexbox for vertical alignments in a logical row for any kind of .col. If you have different size of .col you can align them vertically. You can use the .flex-start .flex-center .flex-end classes on the .row.

    <div class="row flex-top">
        <div class="col-xs-1-2"></div>
        <div class="col-xs-1-2"></div>
    </div>
    <div class="row flex-middle">
        <div class="col-xs-1-2"></div>
        <div class="col-xs-1-2"></div>
    </div>
    <div class="row flex-bottom">
        <div class="col-xs-1-2"></div>
        <div class="col-xs-1-2"></div>
    </div>

Distribution - around

This space distribution technique also using the built in flexbox behaviour and you can achieve it with the .flex-around class.

    <div class="row flex-around">
        <div class="col-xs-1-4"></div>
        <div class="col-xs-1-4"></div>
        <div class="col-xs-1-4"></div>
    </div>

Distribution - between

This space distribution technique also using the built in flexbox behaviour and you can achieve it with the .flex-between class.

    <div class="row flex-between">
        <div class="col-xs-1-4"></div>
        <div class="col-xs-1-4"></div>
        <div class="col-xs-1-4"></div>
    </div>

Responsive visibility