Spacing

List of Custom Spacing Utility Classes included with Canvas.

Classes

Class Description
.topmargin

Sets a margin of 3rem/48px on the top side

Sizes:
  • sm - 2rem/32px
  • lg - 5rem/80px

Ex: .topmargin-sm

.rightmargin

Sets a margin of 3rem/48px on the right side

Sizes:
  • sm - 2rem/32px
  • lg - 5rem/80px

Ex: .rightmargin-sm

.bottommargin

Sets a margin of 3rem/48px on the bottom side

Sizes:
  • sm - 2rem/32px
  • lg - 5rem/80px

Ex: .bottommargin-sm

.leftmargin

Sets a margin of 3rem/48px on the left side

Sizes:
  • sm - 2rem/32px
  • lg - 5rem/80px

Ex: .leftmargin-sm

.allmargin

Sets a margin of 3rem/48px on all sides

Sizes:
  • sm - 2rem/32px
  • lg - 5rem/80px

Option(s): .allmargin-sm

More Spacing Classes

More Spacing Utility Classes can be found here: https://getbootstrap.com/docs/4.5/utilities/spacing/ .

Canvas provides an Additional Extension Spacing Classes of .m-6 and .p-6 with a 5rem/80px Spacing and works in the same way as the Bootstrap Spacing Utility Classes.

Last Modified: July 5, 2020