Example 1: bootstrap Margin and padding Use the margin and padding spacing utilities to control how elements and components are spaced and sized. Bootstrap 4 includes a five-level scale for spacing utilities , based on a 1 rem value default $spacer variable. Choose values for all viewports ( e.g. , .mr-3 for margin-right : 1 rem ) , or pick responsive variants to target specific viewports ( e.g. , .mr-md-3 for margin-right : 1 rem starting at the md breakpoint ) . <div class= "my-0 bg-warning" >Margin Y 0 </div> <div class= "my-1 bg-warning" >Margin Y 1 </div> <div class= "my-2 bg-warning" >Margin Y 2 </div> <div class= "my-3 bg-warning" >Margin Y 3 </div> <div class= "my-4 bg-warning" >Margin Y 4 </div> <div class= "my-5 bg-warning" >Margin Y 5 </div> <div class= "my-auto bg-warning" >Margin Y Auto</div>