Margin
(all 4 sides)
.m-# =
.m-{0-5}
.bg-primary | .m-0
.bg-primary | .m-1
.bg-primary | .m-2
.bg-primary | .m-3
.bg-primary | .m-4
.bg-primary | .m-5
Margin Top
.mt-# =
.mt-{0-5}
.bg-primary | .mt-0
.bg-primary | .mt-1
.bg-primary | .mt-2
.bg-primary | .mt-3
.bg-primary | .mt-4
.bg-primary | .mt-5
Margin Bottom
.mb-# =
.mb-{0-5}
.bg-primary | .mb-0
.bg-primary | .mb-1
.bg-primary | .mb-2
.bg-primary | .mb-3
.bg-primary | .mb-4
.bg-primary | .mb-5
Margin Left
.ml-# =
.ml-{0-5}
.bg-primary | .ml-0
.bg-primary | .ml-1
.bg-primary | .ml-2
.bg-primary | .ml-3
.bg-primary | .ml-4
.bg-primary | .ml-5
Margin Right
.mr-# =
.mr-{0-5}
.bg-primary | .mr-0
.bg-primary | .mr-1
.bg-primary | .mr-2
.bg-primary | .mr-3
.bg-primary | .mr-4
.bg-primary | .mr-5
Margin X
(left & right)
.mx-# =
.mx-{0-5}
.bg-primary | .mx-0
.bg-primary | .mx-1
.bg-primary | .mx-2
.bg-primary | .mx-3
.bg-primary | .mx-4
.bg-primary | .mx-5
Margin Y
(top & bottom)
.my-# =
.my-{0-5}
.bg-primary | .my-0
.bg-primary | .my-1
.bg-primary | .my-2
.bg-primary | .my-3
.bg-primary | .my-4
.bg-primary | .my-5
Padding
(all 4 sides)
.p-# =
.p-{0-5}
.bg-primary | .p-0 | mb-1
.bg-primary | .p-1 | mb-1
.bg-primary | .p-2 | mb-1
.bg-primary | .p-3 | mb-1
.bg-primary | .p-4 | mb-1
.bg-primary | .p-5 | mb-1
Padding Top
.pt-# =
.pt-{0-5}
.bg-primary | .pt-0 | mb-1
.bg-primary | .pt-1 | mb-1
.bg-primary | .pt-2 | mb-1
.bg-primary | .pt-3 | mb-1
.bg-primary | .pt-4 | mb-1
.bg-primary | .pt-5 | mb-1
Padding Bottom
.pb-# =
.pb-{0-5}
.bg-primary | .pb-0 | mb-1
.bg-primary | .pb-1 | mb-1
.bg-primary | .pb-2 | mb-1
.bg-primary | .pb-3 | mb-1
.bg-primary | .pb-4 | mb-1
.bg-primary | .pb-5 | mb-1
Padding Left
.pl-# =
.pl-{0-5}
.bg-primary | .pl-0 | mb-1
.bg-primary | .pl-1 | mb-1
.bg-primary | .pl-2 | mb-1
.bg-primary | .pl-3 | mb-1
.bg-primary | .pl-4 | mb-1
.bg-primary | .pl-5 | mb-1
Padding Right
.pr-# =
.pr-{0-5}
.bg-primary | .pr-0 | mb-1
.bg-primary | .pr-1 | mb-1
.bg-primary | .pr-2 | mb-1
.bg-primary | .pr-3 | mb-1
.bg-primary | .pr-4 | mb-1
.bg-primary | .pr-5 | mb-1
Padding X
(left & right)
.px-# =
.px-{0-5}
.bg-primary | .px-0 | mb-1
.bg-primary | .px-1 | mb-1
.bg-primary | .px-2 | mb-1
.bg-primary | .px-3 | mb-1
.bg-primary | .px-4 | mb-1
.bg-primary | .px-5 | mb-1
Padding Y
(top & bottom)
.py-# =
.py-{0-5}
.bg-primary | .py-0 | mb-1
.bg-primary | .py-1 | mb-1
.bg-primary | .py-2 | mb-1
.bg-primary | .py-3 | mb-1
.bg-primary | .py-4 | mb-1
.bg-primary | .py-5 | mb-1
Margin & Breakpoints
.m-*-# =
.m-{sm, md, lg, xl}-{0-5}
.bg-primary | .m-1 .m-sm-2 .m-md-3 .m-lg-4 .m-xl-5
.bg-primary | .mt-1 .mt-sm-2 .mt-md-3 .mt-lg-4 .mt-xl-5
Padding & Breakpoints
.p-*-# =
.p-{sm, md, lg, xl}-{0-5}
.bg-primary | .p-1 .p-sm-2 .p-md-3 .p-lg-4 .p-xl-5
.bg-primary | .pt-1 .pt-sm-2 .pt-md-3 .pt-lg-4 .pt-xl-5