Skip to content

Elements:Spacers

Bootstrap 4 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-top or padding-top
  • b = margin-bottom or padding-bottom
  • l = margin-left or padding-left
  • r = margin-right or padding-right
  • x = x-axis *-left and *-right
  • y = y-axis *-top and *-bottom
  • blank = all sides margin or padding on all 4 sides of the element

Where size is one of:

  • 0 = removes margin or padding by setting it to 0
  • 1 = sets the margin or padding to 1rem * .25
  • 2 = sets the margin or padding to 1rem * .5
  • 3 = sets the margin or padding to 1rem
  • 4 = sets the margin or padding to 1rem * 1.5
  • 5 = sets the margin or padding to 1rem * 3
  • 6 = sets the margin or padding to 1rem * 4.5
  • 7 = sets the margin or padding to 1rem * 6
  • 8 = sets the margin or padding to 1rem * 7.5
  • 9 = sets the margin or padding to 1rem * 9
  • 10 = sets the margin or padding to 1rem * 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
  • .pl-0 = padding left reset
  • .pl-1 = padding left 0.25rem
  • .pl-2 = padding left 0.5rem
  • .pl-3 = padding left 1rem
  • .pl-4 = padding left 1.5rem
  • .pl-5 = padding left 3rem
  • .pl-6 = padding left 4.5rem
  • .pl-7 = padding left 6rem
  • .pl-8 = padding left 7.5rem
  • .pl-9 = padding left 9rem
  • .pl-10 = padding left 10.5rem
  • .pr-0 = padding right reset
  • .pr-1 = padding right 0.25rem
  • .pr-2 = padding right 0.5rem
  • .pr-3 = padding right 1rem
  • .pr-4 = padding right 1.5rem
  • .pr-5 = padding right 3rem
  • .pr-6 = padding right 4.5rem
  • .pr-7 = padding right 6rem
  • .pr-8 = padding right 7.5rem
  • .pr-9 = padding right 9rem
  • .pr-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
  • .ml-0 = margin left reset
  • .ml-1 = margin left 0.25rem
  • .ml-2 = margin left 0.5rem
  • .ml-3 = margin left 1rem
  • .ml-4 = margin left 1.5rem
  • .ml-5 = margin left 3rem
  • .ml-6 = margin left 4.5rem
  • .ml-7 = margin left 6rem
  • .ml-8 = margin left 7.5rem
  • .ml-9 = margin left 9rem
  • .ml-10 = margin left 10.5rem
  • .mr-0 = margin right reset
  • .mr-1 = margin right 0.25rem
  • .mr-2 = margin right 0.5rem
  • .mr-3 = margin right 1rem
  • .mr-4 = margin right 1.5rem
  • .mr-5 = margin right 3rem
  • .mr-6 = margin right 4.5rem
  • .mr-7 = margin right 6rem
  • .mr-8 = margin right 7.5rem
  • .mr-9 = margin right 9rem
  • .mr-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-VALUE-neg)

  • .mt-0-neg = negative margin top reset
  • .mt-1-neg = negative margin top 0.25rem
  • .mt-2-neg = negative margin top 0.5rem
  • .mt-3-neg = negative margin top 1rem
  • .mt-4-neg = negative margin top 1.5rem
  • .mt-5-neg = negative margin top 3rem
  • .mt-6-neg = negative margin top 4.5rem
  • .mt-7-neg = negative margin top 6rem
  • .mt-8-neg = negative margin top 7.5rem
  • .mt-9-neg = negative margin top 9rem
  • .mt-10-neg = negative margin top 10.5rem
  • .mb-0-neg = negative margin bottom reset
  • .mb-1-neg = negative margin bottom 0.25rem
  • .mb-2-neg = negative margin bottom 0.5rem
  • .mb-3-neg = negative margin bottom 1rem
  • .mb-4-neg = negative margin bottom 1.5rem
  • .mb-5-neg = negative margin bottom 3rem
  • .mb-6-neg = negative margin bottom 4.5rem
  • .mb-7-neg = negative margin bottom 6rem
  • .mb-8-neg = negative margin bottom 7.5rem
  • .mb-9-neg = negative margin bottom 9rem
  • .mb-10-neg = negative margin bottom 10.5rem
  • .ml-0-neg = negative margin left reset
  • .ml-1-neg = negative margin left 0.25rem
  • .ml-2-neg = negative margin left 0.5rem
  • .ml-3-neg = negative margin left 1rem
  • .ml-4-neg = negative margin left 1.5rem
  • .ml-5-neg = negative margin left 3rem
  • .ml-6-neg = negative margin left 4.5rem
  • .ml-7-neg = negative margin left 6rem
  • .ml-8-neg = negative margin left 7.5rem
  • .ml-9-neg = negative margin left 9rem
  • .ml-10-neg = negative margin left 10.5rem
  • .mr-0-neg = negative margin right reset
  • .mr-1-neg = negative margin right 0.25rem
  • .mr-2-neg = negative margin right 0.5rem
  • .mr-3-neg = negative margin right 1rem
  • .mr-4-neg = negative margin right 1.5rem
  • .mr-5-neg = negative margin right 3rem
  • .mr-6-neg = negative margin right 4.5rem
  • .mr-7-neg = negative margin right 6rem
  • .mr-8-neg = negative margin right 7.5rem
  • .mr-9-neg = negative margin right 9rem
  • .mr-10-neg = negative margin right 10.5rem
  • .mx-0-neg = negative margin x-axis reset
  • .mx-1-neg = negative margin x-axis 0.25rem
  • .mx-2-neg = negative margin x-axis 0.5rem
  • .mx-3-neg = negative margin x-axis 1rem
  • .mx-4-neg = negative margin x-axis 1.5rem
  • .mx-5-neg = negative margin x-axis 3rem
  • .mx-6-neg = negative margin x-axis 4.5rem
  • .mx-7-neg = negative margin x-axis 6rem
  • .mx-8-neg = negative margin x-axis 7.5rem
  • .mx-9-neg = negative margin x-axis 9rem
  • .mx-10-neg = negative margin x-axis 10.5rem
  • .my-0-neg = negative margin y-axis reset
  • .my-1-neg = negative margin y-axis 0.25rem
  • .my-2-neg = negative margin y-axis 0.5rem
  • .my-3-neg = negative margin y-axis 1rem
  • .my-4-neg = negative margin y-axis 1.5rem
  • .my-5-neg = negative margin y-axis 3rem
  • .my-6-neg = negative margin y-axis 4.5rem
  • .my-7-neg = negative margin y-axis 6rem
  • .my-8-neg = negative margin y-axis 7.5rem
  • .my-9-neg = negative margin y-axis 9rem
  • .my-10-neg = negative margin y-axis 10.5rem
  • .m0-neg = negative margin all reset
  • .m1-neg = negative margin all 0.25rem
  • .m2-neg = negative margin all 0.5rem
  • .m3-neg = negative margin all 1rem
  • .m4-neg = negative margin all 1.5rem
  • .m5-neg = negative margin all 3rem
  • .m6-neg = negative margin all 4.5rem
  • .m7-neg = negative margin all 6rem
  • .m8-neg = negative margin all 7.5rem
  • .m9-neg = negative margin all 9rem
  • .m10-neg = 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:

<hr class="hr-blank" /> : removes the border attribute to create plain white-space.

<hr class="hr-lg" /> : enlarges the border attribute to create a thicker border.

HR tag colours

You can change the colour of HR tags using the following classes .hr-COLOUR :

.hr-light
.hr-primary
.hr-info
.hr-success
.hr-warning
.hr-danger
.hr-white
.hr-grey
.hr-grey-dark
.hr-primary-faded
.hr-primary-dark
.hr-green
.hr-red
.hr-blue
.hr-purple
.hr-pink
.hr-orange
.hr-lime
.hr-blue-dark
.hr-red-dark
.hr-brown
.hr-cyan-dark
.hr-yellow
.hr-slate
.hr-olive
.hr-teal
.hr-green-bright

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

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

Squares

You can make an element square with fixed width and height properties using the following classes: sq-BREAKPOINT-(sm, md, lg, xl)

Square
.sq-sm
.sq-md
.sq-lg
.sq-xl
Rounded
.sq-sm
.sq-md
.sq-lg
.sq-xl

You can alter these using the $square-sizes variable in the /assets/scss/core/_variables.scss file.

Awesome Features

99.9% Uptime Free Upgrades Fully Responsive Bug Free

Get AppStrap
Theme Colours
Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

Cookies are NOT enabled so colour selection is not persistent.

Back to main homepage

Back to intro page