Documentation

Learn how to use EqualizeCss

Responsive columns

The main elements of the framework are columns. The grid is based on the principle of 12 columns, and you can use the classes to specify how many columns in the container will be for the block on each device. Classes are written as: .col- (breakpoint) - (number of occupied columns), for example: col-md-10, col-xs-12, col-lg-3, col-sm-5.

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

        <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
        </div>

        <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
        </div>
    </div>
</div>

12 column grid

1
2
3
4
5
6
7
8
9
10
11
12

Breakpoints

You can align columns in layout by 4 main breakpoints:

Extra smallSmallMediumLarge
Breakpoint576 px768 px992 px1200 px
Class prefix.col-xs-.col-sm-.col-md-.col-lg-
Container width540 px720 px930 px1125 px
DeviceSmartphonesTablets and netbooksLaptopsDesktop PC

Syntax

All you need to remember when using the grid are classes: container (the main container for content), row (the string where the columns are placed), col-* (indicates the block size in the columns).

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

Offsets

Forget about negative margins and absolute positioning for the sake of a simple offsets. Use special classes, indicating how many columns you want to back out.

.col-xs-offset-2
.col-xs-offset-5
<div class="container">
    <div class="row">
        <div class="col-xs-4 col-xs-offset-2"></div>
        <div class="col-xs-4 col-xs-offset-5"></div>
    </div>
</div>

Autoresize columns

If you do not know how many divs will be in your row, just specify the col class, and they will align by themselves depending on the number of divs.

<div class="container">
    <div class="row">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
    <div class="row">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
    <div class="row">
        <div class="col"></div>
        <div class="col"></div>
    </div>
</div>

Adaptive container

Use .wrapper class instead of .container for make block with content adaptive. The width of the .wrapper will always be 6.5% less than the width of the screen (the margins on the right and left are equal to 3.25% of the viewport width).

Horizontal aligment

Aligning the divs horizontally is now as simple as anything - just assign the appropriate class for it.

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

Vertical aligment

Add special classes to divs to vertically align them relatively to their parent container.

Top
Middle
Bottom
<div class="container">
    <div class="row top-xs">
        <div class="col-xs-6"></div>
        <div class="col-xs-6"></div>
    </div>
    <div class="row middle-xs">
        <div class="col-xs-6"></div>
        <div class="col-xs-6"></div>
    </div>
    <div class="row bottom-xs">
        <div class="col-xs-6"></div>
        <div class="col-xs-6"></div>
    </div>
</div>

Baseline and stretch aligning/alignment availible too: .baseline-xs and .stretch-xs.

Self align

You also can align vertically only one special div in a row.

Top
Middle
Bottom
<div class="container">
    <div class="row">
        <div class="col-xs-4 self-top"></div>
        <div class="col-xs-4 self-middle"></div>
        <div class="col-xs-4 self-bottom"></div>
    </div>
</div>

Justify

Using classes, you can specify the principle by which divs will distribute an empty space between themselves.

Space around
<div class="container">
    <div class="row around-xs">
        <div class="col-xs-4"></div>
        <div class="col-xs-4"></div>
    </div>
</div>
Space between
<div class="container">
    <div class="row between-xs">
        <div class="col-xs-4"></div>
        <div class="col-xs-4"></div>
    </div>
</div>
Space evenly
<div class="container">
    <div class="row evenly-xs">
        <div class="col-xs-4"></div>
        <div class="col-xs-4"></div>
    </div>
</div>

Reordering

Change the order of all divs or only some individual div in the layout.

Last div as first
1
2
3
4
<div class="container">
    <div class="row">
        <div class="col-xs-3"></div>
        <div class="col-xs-3"></div>
        <div class="col-xs-3"></div>
        <div class="col-xs-3 first-xs"></div>
    </div>
</div>
First div as last
1
2
3
4
<div class="container">
    <div class="row">
        <div class="col-xs-3 last-xs"></div>
        <div class="col-xs-3"></div>
        <div class="col-xs-3"></div>
        <div class="col-xs-3"></div>
    </div>
</div>

Reversing

Reverse row or column only with one class: .row-reverse or .column-reverse (if you apply "flex-direction: column" to your div).

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

Breakege

Break row when you want! End the line by simply adding to the empty block class .row-break, and the following blocks will be moved to another line, no matter how much space is left.

col-xs-3
col-xs-3
col-xs-3
<div class="container">
    <div class="row">
        <div class="col-xs-3"></div>
        <div class="col-xs-3"></div>
        <div class="row-break"></div>
        <div class="col-xs-3"></div>
    </div>
</div>