Gutters

Gutters control the horizontal and vertical spacing between grid columns. Canvas uses Bootstrap 5 gutter classes and extends them with an extra step (6) and responsive size shortcuts.

Gutter classes

Class	Effect
`.g-0` to `.g-6`	Both horizontal and vertical gutters
`.gx-0` to `.gx-6`	Horizontal gutters only
`.gy-0` to `.gy-6`	Vertical gutters only

Canvas also ships named size shortcuts that map to its spacing scale:

Class	Meaning
`.g-sm`, `.gx-sm`, `.gy-sm`	Small gutter
`.g-md`, `.gx-md`, `.gy-md`	Medium gutter
`.g-lg`, `.gx-lg`, `.gy-lg`	Large gutter
`.g-xl`, `.gx-xl`, `.gy-xl`	Extra large gutter
`.g-xxl`, `.gx-xxl`, `.gy-xxl`	Extra extra large gutter

Usage

Apply the gutter class on the .row:

<div class="row g-4">
  <div class="col-md-4"><div class="p-3 bg-light">One</div></div>
  <div class="col-md-4"><div class="p-3 bg-light">Two</div></div>
  <div class="col-md-4"><div class="p-3 bg-light">Three</div></div>
</div>

Different horizontal and vertical spacing:

<div class="row gx-5 gy-3">
  <div class="col-6">Wider horizontal, tighter vertical gap</div>
  <div class="col-6">Wider horizontal, tighter vertical gap</div>
</div>

Remove all gutters (columns sit flush):

<div class="row g-0">
  <div class="col-6">Flush</div>
  <div class="col-6">Flush</div>
</div>

Classes

Class	Description
`.gutter-*`	Sets a Column Gutter on the Bootstrap Columns Sizes `.gutter-10` - Sets a 10px Gutter on the Columns `.gutter-20` - Sets a 20px Gutter on the Columns `.gutter-30` - Sets a 30px Gutter on the Columns `.gutter-40` - Sets a 40px Gutter on the Columns `.gutter-50` - Sets a 50px Gutter on the Columns Responsive Breakpoints `.gutter-{size}` - Sets the Gutter Size on all Devices `.gutter-sm-{size}` - Sets the Gutter Size on Devices from 576px `.gutter-md-{size}` - Sets the Gutter Size on Devices from 768px `.gutter-lg-{size}` - Sets the Gutter Size on Devices from 992px `.gutter-xl-{size}` - Sets the Gutter Size on Devices from 1200px Example: [ch_pre class="mb-3"] [/ch_pre] This code sets a Gutter Size of 20px on all Devices but 40px on Devices Widths from 768px You can add Multiple Gutter Utility Classes on the same element for different responsive breakpoints
`.no-gutters`	Disables Gutter margin on Columns. This is useful for No-Margin Grids like this Example: http://themes.semicolonweb.com/html/canvas/portfolio-nomargin.html
`.col-mb-*`	This Class is applied to the Bootstrap `.row` which sets a `margin-bottom` CSS property on all the .col-* Bootstrap Columns inside it. Sizes `.col-mb-30` - Sets a 30px Bottom Margin on the Columns `.col-mb-50` - Sets a 50px Bottom Margin on the Columns `.col-mb-80` - Sets a 80px Bottom Margin on the Columns Responsive Breakpoints `.col-mb-{size}` - Sets the Bottom Margin on all Devices `.col-mb-sm-{size}` - Sets the Bottom Margin on Devices from 576px `.col-mb-md-{size}` - Sets the Bottom Margin on Devices from 768px `.col-mb-lg-{size}` - Sets the Bottom Margin on Devices from 992px `.col-mb-xl-{size}` - Sets the Bottom Margin on Devices from 1200px Example: [ch_pre] [/ch_pre] This code sets a Bottom Margin of 50px on all Devices but 80px on Devices Widths from 992px You can add Multiple Column Margin Utility Classes on the same element for different responsive breakpoints

Was this page helpful?