Grid System

Extend Bootstrap’s grid system to cover larger gutters, rotations and more.

Gutter

Use the .g-{breakpoint}-6 outputclass for larger spaces (6rem).

Article 1

Article 2

Article 3

Article 4

<grid-row outputclass="g-lg-6">
  <grid-col breakpoint="md" colspan="3">
    <section>
      ...
    </section>
  </grid-col>
  <grid-col breakpoint="md" colspan="3">
    <section>
      ...
    </section>
  </grid-col>
  <grid-col breakpoint="md" colspan="3">
    <section>
      ...
    </section>
  </grid-col>
  <grid-col breakpoint="md" colspan="3">
    <section>
      ...
    </section>
  </grid-col>
</grid-row>

<bodydiv outputclass="row g-lg-6">
  <bodydiv outputclass="col-md-3">
    <section>
      ...
    </section>
  </bodydiv>
  <bodydiv outputclass="col-md-3">
    <section>
      ...
    </section>
  </bodydiv>
  <bodydiv outputclass="col-md-3">
    <section>
      ...
    </section>
  </bodydiv>
  <bodydiv outputclass="col-md-3">
    <section>
      ...
    </section>
  </bodydiv>
</bodydiv>

Column push and pull

Use col-{breakpoint}-push-* or col-{breakpoint}-pull-* outputclasses to push or pull the elements in grid system. The col-{breakpoint}-push-* outputclasses also shift the other elements to the right.

With the Bootstrap extension outputclasses, you can easily set divs to pull together.

<grid-row>
  <grid-col breakpoint="md" colspan="6" outputclass="col-md-push-1">
    <image width="100" href="..."/>
  </grid-col>
  <grid-col breakpoint="md" colspan="6" outputclass="col-md-pull-2" margin="t5">
    <p outputclass="bg-fresh text-light" padding="3">...</p>
  </grid-col>
</grid-row>

<bodydiv outputclass="row">
  <bodydiv outputclass="col-md-6 col-md-push-1">
    <image outputclass="w-100" href="..."/>
  </bodydiv>
  <bodydiv outputclass="col-md-6 col-md-pull-2 mt-5">
    <p outputclass="bg-fresh text-light p-3">...</p>
  </bodydiv>
</bodydiv>

Column ordering

Easily change the order of built-in grid columns with @outputclass="col-{breakpoint}-push-*" and @outputclass="col-{breakpoint}-pull-*" modifier outputclasses.

First

Second

<grid-row>
  <grid-col colspan="6" outputclass="col-md-push-6" color="primary" padding="y3">
    First
  </grid-col>
  <grid-col colspan="6" outputclass="col-md-pull-12" color="secondary" padding="y3">
    Second
  </grid-col>
</grid-row>

<bodydiv outputclass="row">
  <bodydiv outputclass="col-6 col-md-push-6 bg-primary text-light py-3">
    First
  </bodydiv>
  <bodydiv outputclass="col-6 col-md-pull-12 bg-secondary text-light py-3">
    Second
  </bodydiv>
</bodydiv>

Content rotate

You can rotate the contents 0 to 90 degrees left or right. Use the .rotate-{breakpoint}-l-{degree} outputclass to rotate left or the .rotate-{breakpoint}-r-{degree} outputclass to rotate right.

Where degree is one of: 0, 5, 10, 15, 20, 25, ... , 90.

New York

Photo: Andrew Ruiz

San Francisco

Photo: Chris Brignola

<bodydiv outputclass="container o-hidden">
  <grid-row>
    <grid-col colspan="12" outputclass="col-sm-6 col-sm-push-4 rotate-sm-l-90">
      <p outputclass="display-7">New York</p>
    </grid-col>
    <grid-col colspan="12" outputclass="col-sm-6 col-sm-pull-4">
      <image width="100" margin="t5" href="..."/>
      <p outputclass="display-9 text-secondary" margin="b5">...</p>
    </grid-col>
  </grid-row>
  <grid-row>
    <grid-col colspan="12" outputclass="col-sm-6 col-sm-push-2 rotate-sm-r-90">
      <p outputclass="display-7">San Francisco</p>
    </grid-col>
    <grid-col colspan="12" outputclass="col-sm-6 col-sm-pull-8">
      <image width="100" margin="t5" href="..."/>
      <p outputclass="display-9 text-secondary" margin="b5">...</p>
    </grid-col>
  </grid-row>
</bodydiv>

<bodydiv outputclass="container o-hidden">
  <bodydiv outputclass="row">
    <bodydiv outputclass="col-12 col-sm-6 col-sm-push-4 rotate-sm-l-90">
      <p outputclass="display-7">New York</p>
    </bodydiv>
    <bodydiv outputclass="col-12 col-sm-6 col-sm-pull-4">
      <image outputclass="w-100 mt-5" href="..."/>
    </bodydiv>
  </bodydiv>
  <bodydiv outputclass="row">
    <bodydiv outputclass="col-12 col-sm-6 col-sm-push-2 rotate-sm-r-90">
      <p outputclass="display-7">San Francisco</p>
    </bodydiv>
    <bodydiv outputclass="col-12 col-sm-6 col-sm-pull-8">
      <image outputclass="w-100 mt-5" href="..."/>
    </bodydiv>
  </bodydiv>
</bodydiv>