Gutters

List of Column Gutter Utility Classes included with Canvas.

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