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 <code>margin</code>, and is denoted by <code>m</code>.

## Sides

The sides include:

- **`t`**: Sets the <code>margin-top</code>.
- **`b`**: Sets the <code>margin-bottom</code>.
- **`l`**: Sets the <code>margin-left</code>.
- **`r`**: Sets the <code>margin-right</code>.
- **`x`**: Sets the <code>margin-left</code> and <code>margin-right</code>.
- **`y`**: Sets the <code>margin-top</code> and <code>margin-bottom</code>.

## Sizes

The sizes include the following:

- **`0`**: Sets the <code>margin</code> to 0.
- **`1`**: Sets the <code>margin</code> to .25rem. This will be 4px if the font size is 16px, that is, 25% of the spacer.
- **`2`**: Sets the <code>margin</code> to .5rem. This will be 8px if the font size is 16px, that is, 50% of the spacer.
- **`3`**: Sets the <code>margin</code> to 1rem. This will be 16px if the font size is 16px, that is, 100% of the spacer.
- **`4`**: Sets the <code>margin</code> to 1.5rem. This will be 24px if the font size is 16px, that is, 150% of the spacer.
- **`5`**: Sets the <code>margin</code> 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 <code>margin</code> to negative. This is done by adding <code>n</code> in front of the size. 

    For example, <code>n1</code> sets the <code>margin</code> 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 <code>auto</code>.

        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 <code>block</code>, and has <code>width</code> set.



<html>
 <head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >

 </head>
 <body>
    <h1 class="text-primary text-capitalize text-center">Examples</h1>
   <div id="div1" class="mt-1 mb-1 ml-1 mr-1"><h2 class="text-info">This sets all the margins for <code>xs<code> breakpoint</code></div>
   <div id="div2" class="mt-md-4 mb-md-4 ml-md-4 mr-md-4"><h2 class="text-info"> This sets the margins for the <code>md</code> breakpoint</h2></div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </body>
</html>

h1{
    font-size: 30px;
}
h2{
    font-size: 15px;
}
#div1{
    width: 70%;
    height: 50px;
    background-color: antiquewhite;
}
#div2{
    width: 70%;
    height: 50px;
    background-color: aqua;
}
#div3{
    display: block;
    width: 70%;
    height: 50px;
    background-color: aquamarine;
}

codemirror

You can keep practicing to improve your understanding.

What are the margin utilities in Bootstrap 4?

Bootstrap 4's margin utilities offer responsive layout adjustments using class syntax, enabling margin control by property, sides, and size for all breakpoints.