What are the margin utilities in Bootstrap 4?

Bootstrap 4 comes with different spacing utilities that help us in responsive design. One of these is the margin utility classes.

They work for all breakpoints.

  • Extra small: xs (<=576px)
  • Small: sm (>=576px)
  • Medium: md (>=768px)
  • Large: lg (>=992px)
  • Extra large: xl (>=1200px)

Syntax

The utility classes are used in this format:

 {property}{sides}-{breakpoint}-{size}

This is the same for all breakpoints, except the xs, which is used in this format:

{property}{sides}-{size}

This syntax is very easy to use, and a developer needs to study its components. The shorthand for the components is explained below.

Property

The property is margin, and is denoted by m.

Sides

The sides include:

  • t: Sets the margin-top.
  • b: Sets the margin-bottom.
  • l: Sets the margin-left.
  • r: Sets the margin-right.
  • x: Sets the margin-left and margin-right.
  • y: Sets the margin-top and margin-bottom.

Sizes

The sizes include the following:

  • 0: Sets the margin to 0.
  • 1: Sets the margin to .25rem. This will be 4px if the font size is 16px, that is, 25% of the spacer.
  • 2: Sets the margin to .5rem. This will be 8px if the font size is 16px, that is, 50% of the spacer.
  • 3: Sets the margin to 1rem. This will be 16px if the font size is 16px, that is, 100% of the spacer.
  • 4: Sets the margin to 1.5rem. This will be 24px if the font size is 16px, that is, 150% of the spacer.
  • 5: Sets the margin to 3rem. This will be 48px if the font size is 16px, that is, 300% of the spacer.
  • auto: Sets the margin to auto.

Note:

  1. We can also set margin to negative. This is done by adding n in front of the size.

    For example, n1 sets the margin to -.25rem. This will be -4px if the font size is 16px.

  2. You can set fixed-width block-level content to the center horizontally by setting the horizontal margins to auto.

     class="mx-auto"
    

    The code above moves the div to the center.

Fixed-width block-level content refers to an element that has its display set to block, and has width set.

You can keep practicing to improve your understanding.