Grid System

Arty is built with Bootstrap v4.x Front-end Framework. Bootstrap's grid system allows up to 12 columns across the page. You can use all 12 columns individually or you can group the columns together to create wider columns. Columns must be placed within a .row and the rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding. Click here to learn more about Bootstrap Grid.

Column Spacing - 30px(default)

Column 1

Column 2

Column 3


<div class="row">
  <div class="col-12 col-md-4">
    <div class="padding-30 bg-gray">
      <p>Column 1</p>
    </div>
  </div>
  <div class="col-12 col-md-4">
    <div class="padding-30 bg-gray">
      <p>Column 2</p>
    </div>
  </div>
  <div class="col-12 col-md-4">
    <div class="padding-30 bg-gray">
      <p>Column 3</p>
    </div>
  </div>
</div>

Column Spacing - 70px

Column 1

Column 2

Column 3


<div class="row col-spacing-70">
  <div class="col-12 col-md-4">
    ...
  </div>
  <div class="col-12 col-md-4">
    ...
  </div>
  <div class="col-12 col-md-4">
    ...
  </div>
</div>

Column Spacing - 60px

Column 1

Column 2

Column 3


<div class="row col-spacing-60">
  <div class="col-12 col-md-4">
    ...
  </div>
  <div class="col-12 col-md-4">
    ...
  </div>
  <div class="col-12 col-md-4">
    ...
  </div>
</div>

Column Spacing - 50px

Column 1

Column 2

Column 3


<div class="row col-spacing-50">
  <div class="col-12 col-md-4">
    ...
  </div>
  <div class="col-12 col-md-4">
    ...
  </div>
  <div class="col-12 col-md-4">
    ...
  </div>
</div>

Column Spacing - 40px

Column 1

Column 2

Column 3


<div class="row col-spacing-40">
  <div class="col-12 col-md-4">
    ...
  </div>
  <div class="col-12 col-md-4">
    ...
  </div>
  <div class="col-12 col-md-4">
    ...
  </div>
</div>

Column Spacing - 20px

Column 1

Column 2

Column 3


<div class="row col-spacing-20">
  <div class="col-12 col-md-4">
    ...
  </div>
  <div class="col-12 col-md-4">
    ...
  </div>
  <div class="col-12 col-md-4">
    ...
  </div>
</div>

Column Spacing - 10px

Column 1

Column 2

Column 3


<div class="row col-spacing-10">
  <div class="col-12 col-md-4">
    ...
  </div>
  <div class="col-12 col-md-4">
    ...
  </div>
  <div class="col-12 col-md-4">
    ...
  </div>
</div>

Column Spacing - 0px

Column 1

Column 2

Column 3


<div class="row col-spacing-0">
  <div class="col-12 col-md-4">
    ...
  </div>
  <div class="col-12 col-md-4">
    ...
  </div>
  <div class="col-12 col-md-4">
    ...
  </div>
</div>

© 2020 FlaTheme, All Rights Reserved.