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;
}