{{> partials/head title="UI Kit | ICE Mortgage Technology"}} {{> partials/modals}} {{> partials/navbar classList="navbar-light fixed-top bg-white border-bottom" container="container-fluid" button="primary"}}
{{> partials/sidenav}}

Grid

Blue: column, Green: gutter (32px/side, 64px between columns)

1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
6
6
12
<section>
  <div class="container mb-6 bg-icecloud text-center">
    <div class="row">
      <div class="col-1">
        <div class="bg-cornflower-300">1</div>
      </div>
      <div class="col-1">
        <div class="bg-cornflower-300">1</div>
      </div>
      <div class="col-1">
        <div class="bg-cornflower-300">1</div>
      </div>
      <div class="col-1">
        <div class="bg-cornflower-300">1</div>
      </div>
      <div class="col-1">
        <div class="bg-cornflower-300">1</div>
      </div>
      <div class="col-1">
        <div class="bg-cornflower-300">1</div>
      </div>
      <div class="col-1">
        <div class="bg-cornflower-300">1</div>
      </div>
      <div class="col-1">
        <div class="bg-cornflower-300">1</div>
      </div>
      <div class="col-1">
        <div class="bg-cornflower-300">1</div>
      </div>
      <div class="col-1">
        <div class="bg-cornflower-300">1</div>
      </div>
      <div class="col-1">
        <div class="bg-cornflower-300">1</div>
      </div>
      <div class="col-1">
        <div class="bg-cornflower-300">1</div>
      </div>
    </div>
  </div>
  <div class="container mb-6 bg-icecloud text-center">
    <div class="row">
      <div class="col-2">
        <div class="bg-cornflower-300">2</div>
      </div>
      <div class="col-2">
        <div class="bg-cornflower-300">2</div>
      </div>
      <div class="col-2">
        <div class="bg-cornflower-300">2</div>
      </div>
      <div class="col-2">
        <div class="bg-cornflower-300">2</div>
      </div>
      <div class="col-2">
        <div class="bg-cornflower-300">2</div>
      </div>
      <div class="col-2">
        <div class="bg-cornflower-300">2</div>
      </div>
    </div>
  </div>
  <div class="container mb-6 bg-icecloud text-center">
    <div class="row">
      <div class="col-3">
        <div class="bg-cornflower-300">3</div>
      </div>
      <div class="col-3">
        <div class="bg-cornflower-300">3</div>
      </div>
      <div class="col-3">
        <div class="bg-cornflower-300">3</div>
      </div>
      <div class="col-3">
        <div class="bg-cornflower-300">3</div>
      </div>
    </div>
  </div>
  <div class="container mb-6 bg-icecloud text-center">
    <div class="row">
      <div class="col-4">
        <div class="bg-cornflower-300">4</div>
      </div>
      <div class="col-4">
        <div class="bg-cornflower-300">4</div>
      </div>
      <div class="col-4">
        <div class="bg-cornflower-300">4</div>
      </div>
    </div>
  </div>
  <div class="container mb-6 bg-icecloud text-center">
    <div class="row">
      <div class="col-6">
        <div class="bg-cornflower-300">6</div>
        </div>
        <div class="col-6">
        <div class="bg-cornflower-300">6</div>
      </div>
    </div>
  </div>
  <div class="container mb-6 bg-icecloud text-center">
    <div class="row">
      <div class="col-12">
        <div class="bg-cornflower-300">12</div>
      </div>
    </div>
  </div>
</section>
Jump to
{{> partials/scripts}}