Grid

Grid systems are used for creating page layouts through a series of rows and columns. CoreLogic applications are built on a vertical 12-column grid which provides a flexible and consistent framework for a responsive application. It is based on the bootstrap grid system, see bootstrap for more extensive documentation.

Don't use the style-guide-grid class in production. It is only here to set borders on this example so you can clearly see the grid breaks.

Basic Grid

.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
<div class="style-guide-grid">
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-6">.col-md-6</div>
  </div>
</div>

Offsetting columns

You can move columns to the right using .col-md-offset-* classes. The grid has a max of 12 columns. Other column sizes may also be used such as .col-xs-offset-*, .col-sm-offset-* and .col-lg-offset-*.

.col-md-8
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
<div class="style-guide-grid">
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
    <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
    <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
  </div>
</div>