Logo Dynamic Framework UI

Spacing

Rule 4 * ....

Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element’s appearance.

Where property is one of:

  • m - for classes that set margin
  • p - for classes that set padding

Where size is one of:

  • 0 - for classes that eliminate the margin or padding by setting it to 0
  • 1 - (by default) for classes that set the margin or padding to $spacer * .25
  • 2 - (by default) for classes that set the margin or padding to $spacer * .5
  • 3 - (modified) for classes that set the margin or padding to $spacer * .75
  • 4 - (modified) for classes that set the margin or padding to $spacer (16px or 1rem)
  • 5 - (modified) for classes that set the margin or padding to $spacer * 1.25
  • 6 - (new) for classes that set the margin or padding to $spacer * 1.5
  • 7 - (new) for classes that set the margin or padding to $spacer * 1.75
  • 8 - (new) for classes that set the margin or padding to $spacer * 2
  • 9 - (new) for classes that set the margin or padding to $spacer * 2.25
  • 10 - (new) for classes that set the margin or padding to $spacer * 2.5
  • 11 - (new) for classes that set the margin or padding to $spacer * 2.75
  • 12 - (new) for classes that set the margin or padding to $spacer * 3
  • 13 - (new) for classes that set the margin or padding to $spacer * 3.25
  • 14 - (new) for classes that set the margin or padding to $spacer * 3.5
  • auto - for classes that set the margin to auto

(You can add more sizes by adding entries to the `$spacers` Sass map variable.)

(You can add more sizes by adding entries to the `$spacers` Sass map variable.)

To understand in more detail review the following documentation : Bootstrap Spacing.

Our personalization:

Spacer 0
Size: 0rem
Size: 0px

Spacer 1
Size: .25rem
Size: 4px

Spacer 2
Size: .5rem
Size: 8px

Spacer 3
Size: .75rem
Size: 12px

Spacer 4
Size: 1rem
Size: 16px

Spacer 5
Size: 1.25rem
Size: 20px

Spacer 6
Size: 1.5em
Size: 24px

Spacer 7
Size: 1.75rem
Size: 28px

Spacer 8
Size: 2rem
Size: 32px

Spacer 9
Size: 2.25rem
Size: 36px

Spacer 10
Size: 2.5rem
Size: 40px

Spacer 11
Size: 2.75rem
Size: 44px

Spacer 12
Size: 3rem
Size: 48px

Spacer 13
Size: 3.25rem
Size: 52px

Spacer 14
Size: 3.5rem
Size: 56px