Margin & Padding

Margin on all sides - .m
.m-1 (margin: 4px;)
.m-2 (margin: 8px;)
.m-3 (margin: 16px;)
.m-4 (margin: 24px;)
.m-5 (margin: 48px;)

Margin left - .ml
.ml-1 (margin-left: 4px;)
.ml-2 (margin-left: 8px;)
.ml-3 (margin-left: 16px;)
.ml-4 (margin-left: 24px;)
.ml-5 (margin-left: 48px;)

Margin right - .mr
.mr-1 (margin-right: 4px;)
.mr-2 (margin-right: 8px;)
.mr-3 (margin-right: 16px;)
.mr-4 (margin-right: 24px;)
.mr-5 (margin-right: 48px;)

Margin top - .mt
.mt-1 (margin-top: 4px;)
.mt-2 (margin-top: 8px;)
.mt-3 (margin-top: 16px;)
.mt-4 (margin-top: 24px;)
.mt-5 (margin-top: 48px;)

Bottom margin - .mb
.mb-1 (margin-bottom: 4px;)
.mb-2 (margin-bottom: 8px;)
.mb-3 (margin-bottom: 16px;)
.mb-4 (margin-bottom: 24px;)
.mb-5 (margin-bottom: 48px;)
Margin auto-.m-auto
.m-auto (margin: auto;)

Responsive Margin Example
Screen sizes: extra small .ml-xs-0 | small .ml-sm-1 | medium .ml-md-2 | large .ml-lg-3 | extra large .ml-xl-5

padding on all sides - .p
.p-1 (padding: 4px;)
.p-2 (padding: 8px;)
.p-3 (padding: 16px;)
.p-4 (padding: 24px;)
.p-5 (padding: 48px;)

padding left - .pl
.pl-1 (padding-left: 4px;)
.pl-2 (padding-left: 8px;)
.pl-3 (padding-left: 16px;)
.pl-4 (padding-left: 24px;)
.pl-5 (padding-left: 48px;)

padding right - .pr
.pr-1 (padding-right: 4px;)
.pr-2 (padding-right: 8px;)
.pr-3 (padding-right: 16px;)
.pr-4 (padding-right: 24px;)
.pr-5 (padding-right: 48px;)

padding top - .en
.en-1 (padding-top: 4px;)
.en-2 (padding-top: 8px;)
.en-3 (padding-top: 16px;)
.en-4 (padding-top: 24px;)
.en-5 (padding-top: 48px;)

bottom padding - .pb
.pb-1 (padding-bottom: 4px;)
.pb-2 (padding-bottom: 8px;)
.pb-3 (padding-bottom: 16px;)
.pb-4 (padding-bottom: 24px;)
.pb-5 (padding-bottom: 48px;)
Responsive padding Example
Screen sizes: Extra small pl-5 | small pl-0 | medium pl-5 | large ml-0 | extra large p-5