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

Ex: 

<div id="portfolio" class="portfolio row grid-container gutter-20 gutter-md-40" data-layout="fitRows">
This code sets a Gutter Size of 20px on all Devices but 40px on Devices Widths from 768px

Note: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

Ex: 

<div class="row col-mb-50 col-mb-lg-80">
This code sets a Bottom Margin of 50px on all Devices but 80px on Devices Widths from 992px

Note:You can add Multiple Column Margin Utility Classes on the same element for different responsive breakpoints

Last Modified: July 5, 2020

Need Help?