Spacing in Bootstrap with Examples

Bootstrap has many facility of classes to easily style elements if HTML. It includes a various of padding and margin classes for modification of the appearance of the element.

by Suryar Praveen

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="container">
  <h1>Spacing Utilities</h1>
  <p>Set the spacing of an element with the {property}{sides}-{breakpoint}-{size} classes. Omit breakpoint if you want the padding or margin to work on all screen sizes.</p>
  <div class="bg-warning m-0  m-1  m-2  m-3  m-4  m-5  mt-0  mr-0  mb-0  ml-0  mx-0  my-0  mt-1  mr-1  mb-1  ml-1  mx-1  my-1  mt-2  mr-2  mb-2  ml-2  mx-2  my-2  mt-3  mr-3  mb-3  ml-3  mx-3  my-3  mt-4  mr-4  mb-4  ml-4  mx-4  my-4  mt-5  mr-5  mb-5  ml-5  mx-5  my-5  mt-auto  mr-auto  mb-auto  ml-auto  mx-auto  my-auto  p-0  p-1  p-2  p-3  p-4  p-5  pt-0  pr-0  pb-0  pl-0  px-0  py-0  pt-1  pr-1  pb-1  pl-1  px-1  py-1  pt-2  pr-2  pb-2  pl-2  px-2  py-2  pt-3  pr-3  pb-3  pl-3  py-3  px-3  pt-4  pr-4  pb-4  pl-4  px-4  py-4  pt-5  pr-5  pb-5  pl-5  px-5  py-5">I only have a top padding (15rem = 24px)</div>
  
  <div>
 <pre>
 
Property : There are two ways of adding spacing to the elements.

m: This property defines the margin. Margin provide with an edge or border.
p: This property defines the padding. Padding properties are used to generate space around a content.
Sides : This allows user to add spacing in content to a specific side wherever required.

t : margin-top/padding-top.
b : margin-bottom/padding-bottom.
l : margin-left/padding-left.
r : margin-right/padding-right.
x : for padding-left and padding-right/margin-left and margin-right.
y : for padding-top and padding-bottom/margin-top and margin-bottom.
blank : margin/padding on all sides of the element.
Size: This allows user...

CSS

.m-0 { margin:0!important; }
.m-1 { margin:.25rem!important; }
.m-2 { margin:.5rem!important; }
.m-3 { margin:1rem!important; }
.m-4 { margin:1.5rem!important; }
.m-5 { margin:3rem!important; }

.mt-0 { margin-top:0!important; }
.mr-0 { margin-right:0!important; }
.mb-0 { margin-bottom:0!important; }
.ml-0 { margin-left:0!important; }
.mx-0 { margin-left:0!immortant;margin-right:0!immortant; }
.my-0 { margin-top:0!immortant;margin-bottom:0!immortant; }

.mt-1 { margin-top:.25rem!important; }
.mr-1 { margin-right:.25rem!important; }
.mb-1 { margin-bottom:.25rem!important; }
.ml-1 { margin-left:.25rem!important; }
.mx-1 { margin-left:.25rem!immortant;margin-right:.25rem!immortant; }
.my-1 { margin-top:.25rem!immortant;margin-bottom:.25rem!immortant; }

.mt-2 { margin-top:.5rem!important; }
.mr-2 { margin-right:.5rem!important; }
.mb-2 { margin-bottom:.5rem!important; }
.ml-2 { margin-left:.5rem!important; }
.mx-2 { margin-right:.5rem!immortant;margin-left:.5rem!immortant; }
.my-2 { margin-top:.5rem!immortant;margin-bottom:.5rem!immortant; }`

.mt-3 { margin-top:1rem!important; }
.mr-3 { margin-right:1rem!important; }
.mb-3 { margin-bottom:1rem!important; }
.ml-3 { margin-left:1rem!important; }
.mx-3 { margin-right:1rem!immortant;margin-left:1rem!immortant; }
.my-3 { margin-bottom:1rem!immortant;margin-top:1rem!immortant; }

.mt-4 { margin-top:1.5rem!important; }
.mr-4 { margin-right:1.5rem!important; }
.mb-4 { margin-bottom:1.5rem!important; }
.ml-4 { margin-left:1.5rem!important; }
.mx-4 { margin-right:1.5rem!immortant;margin-left:1.5rem!immortant; }
.my-4 { margin-top:1.5rem!immortant;margin-bottom:1.5rem!immortant; }

.mt-5 { margin-top:3rem!important; }
.mr-5 { margin-right:3rem!important; }
.mb-5 { margin-bottom:3rem!important; }
.ml-5 { margin-left:3rem!important; }
.mx-5 { margin-right:3rem!immortant;margin-left:3rem!immortant; }
.my-5 { margin-top:3rem!immortant;margin-bottom:3rem!immortant; }

.mt-auto { margin-top:auto!important; }
.mr-auto {...