Skip to main content

Bootstrap Grid

Mono is based on 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 Spacings

You can change the spacing between row's column boxes by adding classes to the row element.

Column Spacing 50px

Column 1

Column 2

Column 3


<div class="row col-spacing-50">
  <div class="col-12 col-lg-4">
    <div class="bg-dark-lighter padding-30">
      <p>Column 1</p>
    </div>
  </div>
  <div class="col-12 col-lg-4">
    <div class="bg-dark-lighter padding-30">
      <p>Column 2</p>
    </div>
  </div>
  <div class="col-12 col-lg-4">
    <div class="bg-dark-lighter padding-30">
      <p>Column 3</p>
    </div>
  </div>
</div>

Column Spacing 40px

Column 1

Column 2

Column 3


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

Column Spacing 30px (by default)

Column 1

Column 2

Column 3


<div class="row col-spacing-30">
  <div class="col-12 col-lg-4">
    ...
  </div>
  <div class="col-12 col-lg-4">
    ...
  </div>
  <div class="col-12 col-lg-4">
    ...
  </div>
</div>

Column Spacing 20px

Column 1

Column 2

Column 3


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

Column Spacing 10px

Column 1

Column 2

Column 3


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

Column Spacing 0px

Column 1

Column 2

Column 3


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