Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

communitycreator
bootstrap

What are the margin utilities in Bootstrap 4?

Akande Olalekan Toheeb

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.

RELATED TAGS

communitycreator
bootstrap

CONTRIBUTOR

Akande Olalekan Toheeb
RELATED COURSES

View all Courses

Keep Exploring