Grid System

The LearnZillion theme uses a custom CSS grid system. This page will cover the basic implementation instructions.

Key things to know about the grid system:

  1. Everything is wrapped in a div.row, which has one or more div.col elements within.
  2. Each div.col element needs a class to specify its width. Specify the widths of each column with the xs-#, sm-#, md-#, and lg-# classes. If no size classes are provided, the column will default to full width.
  3. The grid system uses a 12-column layout, so make sure the widths (for each screen size) add up to twelve.
  4. Mobile first! Meaning, code for small screens first. Larger screens inherit those styles.

Column Classes

A variety of classes can be used for controlling a column's width and placement.

Column Widths

Different column widths can be assigned for different viewport widths:

  • Extra Small Viewports (480px - 767px)
    • xs-1, xs-2, xs-3, xs-4, xs-5, xs-6, xs-7, xs-8, xs-9, xs-10, xs-11, xs-12
  • Small Viewports (768px - 991px)
    • sm-1, sm-2, sm-3, sm-4, sm-5, sm-6, sm-7, sm-8, sm-9, sm-10, sm-11, sm-12
  • Medium Viewports (992px - 1179px)
    • md-1, md-2, md-3, md-4, md-5, md-6, md-7, md-8, md-9, md-10, md-11, md-12
  • Large Viewports (1180px+)
    • lg-1, lg-2, lg-3, lg-4, lg-5, lg-6, lg-7, lg-8, lg-9, lg-10, lg-11, lg-12

Column Offsets

Different column offsets can be assigned for different viewport widths to shift a column to the right with a gap of the desired width:

  • Extra Small Viewports (480px - 767px)
    • xs-offset-1, xs-offset-2, xs-offset-3, xs-offset-4, xs-offset-5, xs-offset-6, xs-offset-7, xs-offset-8, xs-offset-9, xs-offset-10, xs-offset-11
  • Small Viewports (768px - 991px)
    • sm-offset-1, sm-offset-2, sm-offset-3, sm-offset-4, sm-offset-5, sm-offset-6, sm-offset-7, sm-offset-8, sm-offset-9, sm-offset-10, sm-offset-11
  • Medium Viewports (992px - 1179px)
    • md-offset-1, md-offset-2, md-offset-3, md-offset-4, md-offset-5, md-offset-6, md-offset-7, md-offset-8, md-offset-9, md-offset-10, md-offset-11
  • Large Viewports (1180px+)
    • lg-offset-1, lg-offset-2, lg-offset-3, lg-offset-4, lg-offset-5, lg-offset-6, lg-offset-7, lg-offset-8, lg-offset-9, lg-offset-10, lg-offset-11

Column Pushing/Pulling

Columns can be pushed to the right or pulled to the left a specified number of columns for different viewport widths to change the visible order of columns:

  • Extra Small Viewports (480px - 767px)
    • xs-push-1, xs-push-2, xs-push-3, xs-push-4, xs-push-5, xs-push-6, xs-push-7, xs-push-8, xs-push-9, xs-push-10, xs-push-11
    • xs-pull-1, xs-pull-2, xs-pull-3, xs-pull-4, xs-pull-5, xs-pull-6, xs-pull-7, xs-pull-8, xs-pull-9, xs-pull-10, xs-pull-11
  • Small Viewports (768px - 991px)
    • sm-push-1, sm-push-2, sm-push-3, sm-push-4, sm-push-5, sm-push-6, sm-push-7, sm-push-8, sm-push-9, sm-push-10, sm-push-11
    • sm-pull-1, sm-pull-2, sm-pull-3, sm-pull-4, sm-pull-5, sm-pull-6, sm-pull-7, sm-pull-8, sm-pull-9, sm-pull-10, sm-pull-11
  • Medium Viewports (992px - 1179px)
    • md-push-1, md-push-2, md-push-3, md-push-4, md-push-5, md-push-6, md-push-7, md-push-8, md-push-9, md-push-10, md-push-11
    • md-pull-1, md-pull-2, md-pull-3, md-pull-4, md-pull-5, md-pull-6, md-pull-7, md-pull-8, md-pull-9, md-pull-10, md-pull-11
  • Large Viewports (1180px+)
    • lg-push-1, lg-push-2, lg-push-3, lg-push-4, lg-push-5, lg-push-6, lg-push-7, lg-push-8, lg-push-9, lg-push-10, lg-push-11
    • lg-pull-1, lg-pull-2, lg-pull-3, lg-pull-4, lg-pull-5, lg-pull-6, lg-pull-7, lg-pull-8, lg-pull-9, lg-pull-10, lg-pull-11

Examples

Here are some example snippets using the grid system.

Basic Setup

A single column (at all screen sizes) is the very most basic setup you need to have. Start with this unless you know you need multiple columns.

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

        <!-- content goes here -->

    </div>
</div>

Multiple Columns

Display two columns of text for small viewports and up:

<div class="row">
    <div class="col lg-8">

        <!-- main content goes here -->

    </div>
    <div class="col lg-4">

        <!-- side content goes here -->

    </div>
</div>

Display two even-width columns for small viewports and 1:2 distribution for medium viewports and up:

<div class="row">
    <div class="col sm-6 md-4">

        <!-- column 1 content goes here -->

    </div>
    <div class="col sm-6 md-8">

        <!-- column 2 content content goes here -->

    </div>
</div>

Column Offset

Offset a single, narrower column to be centered on the page for larger viewports:

<div class="row">
    <div class="col lg-8 lg-offset-2">

        <!-- content goes here -->

    </div>
</div>

Column Pushing/Pulling

Reorder two columns when displayed side by side for small viewports and up:

<div class="row">
    <div class="col sm-8 sm-push-4">

        <!-- column 1 content goes here -->

    </div>
    <div class="col sm-4 sm-pull-8">

        <!-- column 2 content content goes here -->

    </div>
</div>