Elements:Spacers
Bootstrap 5 added some very useful spacer utilities to allow you to set element margins & padding uses simple CSS classes. These allow you to layout and space out content with ease.
Class name format
The spacer classes following this format for xs screenwidth:
{property}{sides}-{size}
and the following format for for sm, md, lg, and xl
{property}{sides}-{breakpoint}-{size}
Where property is one of:
-
m=margin -
p=padding
Where sides is one of:
-
t=margin-toporpadding-top -
b=margin-bottomorpadding-bottom -
s=margin-leftorpadding-left -
e=margin-rightorpadding-right -
x= x-axis*-leftand*-right -
y= y-axis*-topand*-bottom -
blank = all sides
marginorpaddingon all 4 sides of the element
Where size is one of:
-
0= removesmarginorpaddingby setting it to0 -
1= sets themarginorpaddingto1rem * .25 -
2= sets themarginorpaddingto1rem * .5 -
3= sets themarginorpaddingto1rem -
4= sets themarginorpaddingto1rem * 1.5 -
5= sets themarginorpaddingto1rem * 3 -
6= sets themarginorpaddingto1rem * 4.5 -
7= sets themarginorpaddingto1rem * 6 -
8= sets themarginorpaddingto1rem * 7.5 -
9= sets themarginorpaddingto1rem * 9 -
10= sets themarginorpaddingto1rem * 10.5
These spacers can be applied to all elements and also combined.
All classes
Padding
-
.pt-0= padding top reset -
.pt-1= padding top 0.25rem -
.pt-2= padding top 0.5rem -
.pt-3= padding top 1rem -
.pt-4= padding top 1.5rem -
.pt-5= padding top 3rem -
.pt-6= padding top 4.5rem -
.pt-7= padding top 6rem -
.pt-8= padding top 7.5rem -
.pt-9= padding top 9rem -
.pt-10= padding top 10.5rem
-
.pb-0= padding bottom reset -
.pb-1= padding bottom 0.25rem -
.pb-2= padding bottom 0.5rem -
.pb-3= padding bottom 1rem -
.pb-4= padding bottom 1.5rem -
.pb-5= padding bottom 3rem -
.pb-6= padding bottom 4.5rem -
.pb-7= padding bottom 6rem -
.pb-8= padding bottom 7.5rem -
.pb-9= padding bottom 9rem -
.pb-10= padding bottom 10.5rem
-
.ps-0= padding left reset -
.ps-1= padding left 0.25rem -
.ps-2= padding left 0.5rem -
.ps-3= padding left 1rem -
.ps-4= padding left 1.5rem -
.ps-5= padding left 3rem -
.ps-6= padding left 4.5rem -
.ps-7= padding left 6rem -
.ps-8= padding left 7.5rem -
.ps-9= padding left 9rem -
.ps-10= padding left 10.5rem
-
.pe-0= padding right reset -
.pe-1= padding right 0.25rem -
.pe-2= padding right 0.5rem -
.pe-3= padding right 1rem -
.pe-4= padding right 1.5rem -
.pe-5= padding right 3rem -
.pe-6= padding right 4.5rem -
.pe-7= padding right 6rem -
.pe-8= padding right 7.5rem -
.pe-9= padding right 9rem -
.pe-10= padding right 10.5rem
-
.px-0= padding x-axis reset -
.px-1= padding x-axis 0.25rem -
.px-2= padding x-axis 0.5rem -
.px-3= padding x-axis 1rem -
.px-4= padding x-axis 1.5rem -
.px-5= padding x-axis 3rem -
.px-6= padding x-axis 4.5rem -
.px-7= padding x-axis 6rem -
.px-8= padding x-axis 7.5rem -
.px-9= padding x-axis 9rem -
.px-10= padding x-axis 10.5rem
-
.py-0= padding y-axis reset -
.py-1= padding y-axis 0.25rem -
.py-2= padding y-axis 0.5rem -
.py-3= padding y-axis 1rem -
.py-4= padding y-axis 1.5rem -
.py-5= padding y-axis 3rem -
.py-6= padding y-axis 4.5rem -
.py-7= padding y-axis 6rem -
.py-8= padding y-axis 7.5rem -
.py-9= padding y-axis 9rem -
.py-10= padding y-axis 10.5rem
-
.p0= padding all reset -
.p1= padding all 0.25rem -
.p2= padding all 0.5rem -
.p3= padding all 1rem -
.p4= padding all 1.5rem -
.p5= padding all 3rem -
.p6= padding all 4.5rem -
.p7= padding all 6rem -
.p8= padding all 7.5rem -
.p9= padding all 9rem -
.p10= padding all 10.5rem
Margin
-
.mt-0= margin top reset -
.mt-1= margin top 0.25rem -
.mt-2= margin top 0.5rem -
.mt-3= margin top 1rem -
.mt-4= margin top 1.5rem -
.mt-5= margin top 3rem -
.mt-6= margin top 4.5rem -
.mt-7= margin top 6rem -
.mt-8= margin top 7.5rem -
.mt-9= margin top 9rem -
.mt-10= margin top 10.5rem
-
.mb-0= margin bottom reset -
.mb-1= margin bottom 0.25rem -
.mb-2= margin bottom 0.5rem -
.mb-3= margin bottom 1rem -
.mb-4= margin bottom 1.5rem -
.mb-5= margin bottom 3rem -
.mb-6= margin bottom 4.5rem -
.mb-7= margin bottom 6rem -
.mb-8= margin bottom 7.5rem -
.mb-9= margin bottom 9rem -
.mb-10= margin bottom 10.5rem
-
.ms-0= margin left reset -
.ms-1= margin left 0.25rem -
.ms-2= margin left 0.5rem -
.ms-3= margin left 1rem -
.ms-4= margin left 1.5rem -
.ms-5= margin left 3rem -
.ms-6= margin left 4.5rem -
.ms-7= margin left 6rem -
.ms-8= margin left 7.5rem -
.ms-9= margin left 9rem -
.ms-10= margin left 10.5rem
-
.me-0= margin right reset -
.me-1= margin right 0.25rem -
.me-2= margin right 0.5rem -
.me-3= margin right 1rem -
.me-4= margin right 1.5rem -
.me-5= margin right 3rem -
.me-6= margin right 4.5rem -
.me-7= margin right 6rem -
.me-8= margin right 7.5rem -
.me-9= margin right 9rem -
.me-10= margin right 10.5rem
-
.mx-0= margin x-axis reset -
.mx-1= margin x-axis 0.25rem -
.mx-2= margin x-axis 0.5rem -
.mx-3= margin x-axis 1rem -
.mx-4= margin x-axis 1.5rem -
.mx-5= margin x-axis 3rem -
.mx-6= margin x-axis 4.5rem -
.mx-7= margin x-axis 6rem -
.mx-8= margin x-axis 7.5rem -
.mx-9= margin x-axis 9rem -
.mx-10= margin x-axis 10.5rem
-
.my-0= margin y-axis reset -
.my-1= margin y-axis 0.25rem -
.my-2= margin y-axis 0.5rem -
.my-3= margin y-axis 1rem -
.my-4= margin y-axis 1.5rem -
.my-5= margin y-axis 3rem -
.my-6= margin y-axis 4.5rem -
.my-7= margin y-axis 6rem -
.my-8= margin y-axis 7.5rem -
.my-9= margin y-axis 9rem -
.my-10= margin y-axis 10.5rem
-
.m0= margin all reset -
.m1= margin all 0.25rem -
.m2= margin all 0.5rem -
.m3= margin all 1rem -
.m4= margin all 1.5rem -
.m5= margin all 3rem -
.m6= margin all 4.5rem -
.m7= margin all 6rem -
.m8= margin all 7.5rem -
.m9= margin all 9rem -
.m10= margin all 10.5rem
Negative Margins (.mSIDE-nVALUE)
-
.mt-n0= negative margin top reset -
.mt-n1= negative margin top 0.25rem -
.mt-n2= negative margin top 0.5rem -
.mt-n3= negative margin top 1rem -
.mt-n4= negative margin top 1.5rem -
.mt-n5= negative margin top 3rem -
.mt-n6= negative margin top 4.5rem -
.mt-n7= negative margin top 6rem -
.mt-n8= negative margin top 7.5rem -
.mt-n9= negative margin top 9rem -
.mt-n10= negative margin top 10.5rem
-
.mb-n0= negative margin bottom reset -
.mb-n1= negative margin bottom 0.25rem -
.mb-n2= negative margin bottom 0.5rem -
.mb-n3= negative margin bottom 1rem -
.mb-n4= negative margin bottom 1.5rem -
.mb-n5= negative margin bottom 3rem -
.mb-n6= negative margin bottom 4.5rem -
.mb-n7= negative margin bottom 6rem -
.mb-n8= negative margin bottom 7.5rem -
.mb-n9= negative margin bottom 9rem -
.mb-n10= negative margin bottom 10.5rem
-
.ms-n0= negative margin left reset -
.ms-n1= negative margin left 0.25rem -
.ms-n2= negative margin left 0.5rem -
.ms-n3= negative margin left 1rem -
.ms-n4= negative margin left 1.5rem -
.ms-n5= negative margin left 3rem -
.ms-n6= negative margin left 4.5rem -
.ms-n7= negative margin left 6rem -
.ms-n8= negative margin left 7.5rem -
.ms-n9= negative margin left 9rem -
.ms-n10= negative margin left 10.5rem
-
.me-n0= negative margin right reset -
.me-n1= negative margin right 0.25rem -
.me-n2= negative margin right 0.5rem -
.me-n3= negative margin right 1rem -
.me-n4= negative margin right 1.5rem -
.me-n5= negative margin right 3rem -
.me-n6= negative margin right 4.5rem -
.me-n7= negative margin right 6rem -
.me-n8= negative margin right 7.5rem -
.me-n9= negative margin right 9rem -
.me-n10= negative margin right 10.5rem
-
.mx-n0= negative margin x-axis reset -
.mx-n1= negative margin x-axis 0.25rem -
.mx-n2= negative margin x-axis 0.5rem -
.mx-n3= negative margin x-axis 1rem -
.mx-n4= negative margin x-axis 1.5rem -
.mx-n5= negative margin x-axis 3rem -
.mx-n6= negative margin x-axis 4.5rem -
.mx-n7= negative margin x-axis 6rem -
.mx-n8= negative margin x-axis 7.5rem -
.mx-n9= negative margin x-axis 9rem -
.mx-n10= negative margin x-axis 10.5rem
-
.my-n0= negative margin y-axis reset -
.my-n1= negative margin y-axis 0.25rem -
.my-n2= negative margin y-axis 0.5rem -
.my-n3= negative margin y-axis 1rem -
.my-n4= negative margin y-axis 1.5rem -
.my-n5= negative margin y-axis 3rem -
.my-n6= negative margin y-axis 4.5rem -
.my-n7= negative margin y-axis 6rem -
.my-n8= negative margin y-axis 7.5rem -
.my-n9= negative margin y-axis 9rem -
.my-n10= negative margin y-axis 10.5rem
-
.mn0= negative margin all reset -
.mn1= negative margin all 0.25rem -
.mn2= negative margin all 0.5rem -
.mn3= negative margin all 1rem -
.mn4= negative margin all 1.5rem -
.mn5= negative margin all 3rem -
.mn6= negative margin all 4.5rem -
.mn7= negative margin all 6rem -
.mn8= negative margin all 7.5rem -
.mn9= negative margin all 9rem -
.mn10= negative margin all 10.5rem
HR tags
Combining the spacers with
hr
tags is a useful way to space on content and we've added 2 custom classes for
hr
tags to make them even more useful:
: removes the border attribute to create plain white-space.
: enlarges the border attribute to create a thicker border.
HR tag colours
You can change the colour of HR tags using the following classes
.bg-COLOUR
:
.bg-light
.bg-primary
.bg-info
.bg-success
.bg-warning
.bg-danger
.bg-white
.bg-green
.bg-red
.bg-blue
.bg-purple
.bg-pink
.bg-orange
.bg-brown
.bg-slate
.bg-olive
.bg-teal
.bg-charcoal
Widths
Quick adjust an elements width to these predefined percentages, this can also be combined with the
.mx-auto
class to center the item.
You can also apply these per breakpoint & combine them using:
.w-sm-[5-100|auto]
,
.w-md-[5-100|auto]
,
.w-lg-[5-100|auto]
& ,
.w-xl-[5-100|auto]
.w-5
.w-10
.w-15
.w-20
.w-25
.w-30
.w-35
.w-40
.w-45
.w-50
.w-55
.w-60
.w-65
.w-70
.w-75
.w-80
.w-85
.w-90
.w-95
.w-100
.w-auto
.w-5px
.w-5px
.w-15px
.w-20px
Heights
Quick adjust an element heights to these predefined percentages.
.h-5
.h-10
.h-15
.h-20
.h-25
.h-30
.h-35
.h-40
.h-45
.h-50
.h-55
.h-60
.h-65
.h-70
.h-75
.h-80
.h-85
.h-90
.h-95
.h-100
.h-5px
.h-5px
.h-15px
.h-20px
Squares
You can make an element square with fixed width and height properties using the following classes:
sq-BREAKPOINT-(sm, md, lg, xl)
Square
Rounded
You can alter these using the
$square-sizes
variable in the
/assets/scss/core/_variables.scss
file.