What is this block for in Bootsrap 4 and how to set the correct values ​​in it

$spacer: 1rem !default; $spacer-x: $spacer !default; $spacer-y: $spacer !default; $spacers: ( 0: ( x: 0, y: 0 ), 1: ( x: $spacer-x, y: $spacer-y ), 2: ( x: ($spacer-x * 1.5), y: ($spacer-y * 1.5) ), 3: ( x: ($spacer-x * 3), y: ($spacer-y * 3) ) )

1 answer 1

The block in question refers to the new utilities of Bootstrap 4 - spacers, or "inserts", "gaskets".

This utility is designed for convenient adaptive adjustment of margins (margin) or padding of an element. These classes are introduced (in version 4) because margins and indents (not counting fonts and colors) are the most frequently redefined elements of Bootstrap.

For example, if you do not need the lower field in the navbar , now it is enough to add the class mb-0 to the navbar (actually, “mb” is short for “margin-bottom”). You can customize the fields and indents as you like - from above, below, right, left, from all sides.

Another example: the mx-3 class will set the left and right margins of an element (with the $ spacer value set by default) to 1rem.

For indenting classes, respectively, begin with p: .pt (padding-top), .pl (padding-left), etc.

Below is a complete list.

Classes are named after the {свойство}{стороны}-{размер} for xs and { свойство}{ стороны}-{брейкпойнт}-{размер} for sm, md, lg и xl .

Properties:

  • m - for classes that set margins
  • p - for classes setting padding padding

Parties:

  • t - for classes that set margin-top or padding-top
  • b - for classes setting margin-bottom or padding-bottom
  • l - for classes setting margin-left or padding-left
  • r - for classes that set margin-right or padding-right
  • x - for classes installing both * -left and * -right
  • y - for classes that install both * -top and * -bottom
  • blank - for classes setting a margin or padding on all 4 sides of the element

And size is one of the following values ​​(you can add your own using the $ spacers variable in SASS):

  • 0 - for classes that remove the margin or padding (they are set to 0)
  • 1 - (default) for classes that set the margin or padding to $ spacer-x * .25 or $ spacer-y * .25
  • 2 - (default) for classes that set margin or padding to $ spacer-x * .5 or $ spacer-y * .5
  • 3 - (default) for classes that set margin or padding to $ spacer-x or $ spacer-y
  • 4 - (default) for classes that set margin or padding to $ spacer-x * 1.5 or $ spacer-y * 1.5
  • 5 - (default) for classes that set the margin or padding to $ spacer-x * 3 or $ spacer-y * 3

There is also a class for centering horizontally: mx-auto (applies to a block element with a set width).

Read more: Bootstrap 4 documentation https://v4-alpha.getbootstrap.com/utilities/spacing/