Docs - Grid

The grid gap size is based on Bootstrap grid system. To use these grid gap sizes, you will have to apply the .row class within the .container class.

• Default grid columns gap size - 15px

Breakpoints for different devices

Options for grid rows and columns size classes

• .row - creates grid row
• .col-lg-12 - creates grid column that uses 100% of parent width on lg and larger screens.
• .col-lg-11 - creates grid column that uses 11/12 of parent width on lg and larger screens.
• .col-lg-10 - creates grid column that uses 10/12 of parent width on lg and larger screens.
• .col-lg-9 - creates grid column that uses 9/12 of parent width on lg and larger screens.
• .col-lg-8 - creates grid column that uses 8/12 of parent width on lg and larger screens.
• .col-lg-7 - creates grid column that uses 7/12 of parent width on lg and larger screens.
• .col-lg-6 - creates grid column that uses 6/12 of parent width on lg and larger screens.
• .col-lg-5 - creates grid column that uses 5/12 of parent width on lg and larger screens.
• .col-lg-4 - creates grid column that uses 4/12 of parent width on lg and larger screens.
• .col-lg-3 - creates grid column that uses 3/12 of parent width on lg and larger screens.
• .col-lg-2 - creates grid column that uses 2/12 of parent width on lg and larger screens.
• .col-lg-1 - creates grid column that uses 1/12 of parent width on lg and larger screens.

Grid columns offsetting class

• .col-lg-offset - creates grid column left offset that takes X/12 of parent width on Y and larger screens.

Grid columns ordering

For certain screen resolutions, you can even reorder columns. Add .col-lg-push class to left column that should actually be at the right side on Y screen. X - should be equal to other column width in this screen resolution. .col-lg-pull class to right column that should actually be at the left side on Y screen. X - should be equal to previous column width in this screen resolution

Clearfix

If you face problems like columns collapsing and/or overlapping bugs, you have to insert .clearfix class to resolve it.