Basic usage

.col-xs-12 .col-sm-1
.col-xs-12 .col-sm-6 .col-md-5 .col-lg-4
.col-xs-12 .col-sm-5 .col-md-6 .col-lg-7
.col-xs-12 .col-sm-1
.col-xs-12 .col-sm-10
.col-xs-12 .col-sm-1 
<div class="grid-row">
  <div class="col-xs-12 col-sm-1">
    ...
  </div>
  <div class="col-xs-12 col-sm-6 col-md-5 col-lg-4">
    ...
  </div>
  <div class="col-xs-12 col-sm-5 col-md-6 col-lg-7">
    ...
  </div>
</div>

Containers

container-fluid

contanier-fluid Uses full viewport size

container-fluid-1920

contanier-fluid-1920 Uses max 1920px viewport size

container-fluid-1440

contanier-fluid-1440 Uses max 1440px viewport size

End column position ⚠️ no flexbox fallback ⚠️

col-xs-6 col-xs-end-6 col-sm-4 col-sm-end-6
col-xs-6 col-xs-end-10 
<div class="grid-demo">
      <div class="grid-row">
        <div class="col-xs-6 col-xs-end-6 col-sm-4 col-sm-end-8">
          col-xs-6 col-xs-end-6 col-sm-4 col-sm-end-8
        </div>
      </div>
      <div class="grid-row">
        <div class="col-xs-6 col-xs-end-10">
          col-xs-6 col-xs-end-10
        </div>
      </div>
    </div>
  </div>

Order columns

A col-xs-12 col-sm-2
B col-xs-12 col-sm-4
C col-xs-12 col-sm-3
D col-xs-12 col-sm-2
E col-xs-12 col-sm-2
A ... col-sm-order-2
B ... col-sm-order-4
C ... col-sm-order-1
D ... col-sm-order-5
E ... col-sm-order-3 
<div class="grid-row">
  <div class="col-xs-12 col-sm-2 col-sm-order-2">
    A
  </div>
  <div class="col-xs-12 col-sm-2 col-sm-order-4">
    B
  </div>
  <div class="col-xs-12 col-sm-3 col-sm-order-1">
    C
  </div>
  <div class="col-xs-12 col-sm-4 col-sm-order-5">
    D
  </div>
  <div class="col-xs-12 col-sm-1 col-sm-order-3">
    E
  </div>
</div>

Gutters / grid-gap

col-xs-6 col-sm-4 no-gutter-right-sm
col-xs-6 col-sm-4 no-gutters-sm
col-xs-6 col-sm-4
col-xs-12 no-gutters
col-xs-12 no-gutters gutter-left-sm
col-xs-12 col-sm-4 no-gutter-right-sm gutters-lg
col-xs-12 col-sm-4 no-gutter-right-sm 
<div class="grid-row">
  <div class="col-xs-6 col-sm-4 no-gutter-right-sm">
    ...
  </div>

  <div class="col-xs-6 col-sm-4 no-gutters-sm">
    ...
  </div>

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

<div class="grid-row">
  <div class="col-xs-12 no-gutters">
    ...
  </div>
</div>

<div class="grid-row">
  <div class="col-xs-12 col-sm-4 no-gutters gutter-left-sm">
  ...
  </div>

  <div class="col-xs-12 col-sm-4 no-gutters-sm gutters-lg">
    ...
  </div>

  <div class="col-xs-12 col-sm-4 no-gutter-left-sm">
    ...
  </div>
</div>

Col Fillers

Col Fillers are similar to containers but they have 2 grid cols outside content. This allow to you, set different colors in each outside column.

There are 3 predefined content sizes:

  • .grid-filler-1240
  • .grid-filler-1140
  • .grid-filler-1440

You can create own: 

          
.grid-filler-1500 {
    @supports (display: grid) {
      grid-template-columns: auto minmax(0, 1500px) auto;
    }
    .grid-filler-container {
      max-width: 1500px;
    }
  }

/* OR use mixin */

@include make-grid-filler-size(1500);
col-xs-6
col-xs-6
col-xs-6 col-sm-4
col-xs-6 col-sm-4
col-xs-12 col-sm-4 
<div class="grid-filler grid-filler-1140">
  <div class="grid-col-filler grid-left-filler"></div>
  <div class="grid-filler-container">
    <div class="grid-row">
      <div class="col-xs-6">
        ...
      </div>

      <div class="col-xs-6">
        ...
      </div>
    </div>
    ...
   </div>
  <div class="grid-col-filler grid-right-filler"></div>
</div>

Hidden / Visible

B col-xs-12 col-sm-3 visible-lg
D col-xs-12 col-sm-2
E col-xs-12 col-sm-2
<div class="grid-row">
    <div class="col-xs-12 col-sm-2 hidden-xs hidden-sm">
      A
    </div>
    <div class="col-xs-12 col-sm-3 visible-lg">
      B
    </div>
    <div class="col-xs-12 col-sm-3 hidden-lg">
      C
    </div>
    <div class="col-xs-12 col-sm-2">
      D
    </div>
    <div class="col-xs-12 col-sm-2">
      E
    </div>
  </div>

Responsive Embed iframe

<div class="responsive-embed-wrapper">
      <iframe
        width="560"
        height="315"
        src="https://www.youtube-nocookie.com/embed/l69Uz1vYbNU"
        frameborder="0"
        allow="accelerometer; autoplay; loop; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen>
      </iframe>
    </div>

Margins

mb-1 margin-bottom: 10px;
mb-2 margin-bottom: 20px;
mb-3 margin-bottom: 30px;
mb-4 margin-bottom: 40px;
mb-5 margin-bottom: 50px;
mt-1 margin-top: 10px;
mt-2 margin-top: 20px;
mt-3 margin-top: 30px;
mt-4 margin-top: 40px;
mt-5 margin-top: 50px;