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).

<bodydiv outputclass="row g-lg-6">
  <section outputclass="col-md-3">
    ...
  </section>
  <section outputclass="col-md-3">
    ...
  </section>
  <section outputclass="col-md-3">
    ...
  </section>
  <section outputclass="col-md-3">
    ...
  </section>
</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.

<div outputclass="row">
  <div outputclass="col-md-6 col-md-push-1">
    ...
  </div>
  <div outputclass="col-md-6 col-md-pull-2 mt-5">
    ...
  </div>
</div>

Column ordering

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

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

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.

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