How can we use spacing classes in bootstrap 4

Bootstrap is an open source framework to create responsive, mobile friendly sites. It contains HTML and css based design templates for website interface.It is free to download and use.

In bootstrap 4 there are various predefined classes for padding and margin to improve the element’s appearance.

Class Format

• {property}{sides}-{size} for xs
• {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl

Where Property

• m – for margin
• p  – for padding

Where sides

• t  – for top (maring-top, padding-top)
• b – for bottom (maring-bottom, padding-bottom)
• r – for left (margin-left, padding-left)
• r – for  right (margin-right,padding-right)
• x – for left,right (*-left,*-right)
• y – for top,bottom (*-top,*-bottom)
• blank – for all side

Where size

• 0 – set margin or padding 0 to element
• 1 – set margin or padding ($spacer * .25) to element
• 2 – set margin or padding ($spacer * .5) to element
• 3 – set margin or padding ($spacer) to element
• 4 – set margin or padding ($spacer * 1.5) to element
• 5 – set margin or padding ($spacer * 3) to element
• auto – set margin (auto) to element

Example :

.mt-0 {
margin-top: 0 !important;
}

.pt-0 {
padding-top: 0 !important;
}

.mr-1 {
margin-right: ($spacer * .25) !important;
}

.mx-2 {
margin-left: ($spacer * .5) !important;
margin-right: ($spacer * .5) !important;
}

.px-4 {
padding-left: ($spacer * 1.5) !important;
padding-right: ($spacer * 1.5) !important;
}

 Read more about spacing