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>