Loading

Grid

Or, more specifically, Flexbox grid :D By default the .container class uses the settings in _variables.scss to define maximum widths. This is one of the best, most flexible grid systems out there that just works. Designed to be light weight and very flexible, the Flexbox grid system is easy to learn and even easier to configure.

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


Fluid

You can use a percentage based fluid grid system by appending -fluid to the container class. Note that this still adds 1rem of padding (or the specified padding in _variables.scss) to either side of the container.

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4"></div>
        <div class="col-xs-12 col-sm-6 col-md-4"></div>
        <div class="col-xs-12 col-sm-6 col-md-4"></div>
    </div>
</div>


Full

Need a full width container with no padding? Then .container-full is your friend!

<div class="container-full">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4"></div>
        <div class="col-xs-12 col-sm-6 col-md-4"></div>
        <div class="col-xs-12 col-sm-6 col-md-4"></div>
    </div>
</div>


Gapless

Need to remove the gutter between columns? just use .gapless on each column

<div class="row mb-1">
 <div class="col-xs-12 col-sm-3 col-md-2 col-lg-1 gapless">
   <div class="box-row">
   </div>
 </div>
 <div class="col-xs-6 col-sm-6 col-md-8 col-lg-10 gapless">
   <div class="box-row">
   </div>
 </div>
 <div class="col-xs-6 col-sm-3 col-md-2 col-lg-1 gapless">
   <div class="box-row">
   </div>
 </div>
</div>


Offset

Offsetting columns is easy as...

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


Auto sizing

When you really can't be bothered setting anything so you just let the browser do it's thing

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


Nested grids

Grid within a grid within a grid within a grid... this is some kinda inception madness!

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


Grid alignment

Align items in the grid using the flex- Start / Center / End

Start

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


Center

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


End

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


Aligning at different viewports

Resize the screen to see the alignment change depending on the viewport width.

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


Top

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


Middle

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


Bottom

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


Distribution

You can change the distribution of the white-space around the grid items


Around

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


Between

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


Reordering

You can change the order of your columns by defining the order in which they appear at different viewport widths

1
2
3
4
5
6
// .first-
<div class="row">
    <div class="col-xs-2">
        <div class="box">
            1
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            2
        </div>
    </div>
    <div class="col-xs-2 first-xs last-sm">
        <div class="box">
            3
        </div>
    </div>
</div>
// .last-
<div class="row">
    <div class="col-xs-2 last-xs first-sm">
        <div class="box">
            1
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            2
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            3
        </div>
    </div>
</div>


Reverse

1
2
3
4
5
6
<div class="row reverse">
    <div class="col-xs-2">
        <div class="box">
            1
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            2
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            3
        </div>
    </div>
</div>