Bootstrap has a lot of features available for margins and padding. The various utility classes can be used to modify an element’s appearance.
How Bootstrap Spacing works
For a responsive-friendly margin or padding you need to assign the values to an element with the shorthand utility classes.
Bootstrap provides support for individual properties, vertical and horizontal properties and all properties.
The classes being used are built using a default Sass map that ranges from .25rem to 3rem.
Notation
The utility classes for spacing are applicable to all the breakpoints starting from xs and upto xl.
These classes have no breakpoint abbreviation in them. The reason being, these classes are applicable from the min-width value as 0 and upwards.
Therefore, they are not bound by any media query. However, there are breakpoint abbreviations available for the remaining breakpoints.
The naming format for these classes can be described as below:
- {property}{sides}-{size} for xs
- {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl
Here, the ‘property’ is replaceable with any of the following:
- m – for classes responsible for setting the margin
- p – for classes responsible for setting the padding
The ‘sides’ is replaceable with any of the following:
- t – for classes responsible for setting margin-top or padding-top
- b – for classes responsible for setting margin-bottom or padding-bottom
- l – for classes responsible for setting margin-left or padding-left
- r – for classes responsible for setting margin-right or padding-right
- x – for classes responsible for setting both *-left and *-right
- y – for classes responsible for setting both *-top and *-bottom
- blank – for classes responsible for setting a margin or padding on all 4 sides of the element
The ‘size’ is replaceable with any of the following:
- 0 – for classes responsible for eliminating the margin or padding by setting it to 0
- 1 – (by default) for classes responsible for setting the margin or padding to $spacer * .25
- 2 – (by default) for classes responsible for setting the margin or padding to $spacer * .5
- 3 – (by default) for classes responsible for setting the margin or padding to
$ spacer - 4 – (by default) for classes responsible for setting the margin or padding to $spacer * 1.5
- 5 – (by default) for classes responsible for setting the margin or padding to $spacer * 3
- auto – for classes responsible for setting the margin to auto
More sizes can be added by adding entries to the $spacers Sass map variable.
See the code below for better understanding:
Examples
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .mt-0 { margin-top: 0 !important; } .ml-1 { margin-left: ($spacer * .25) !important; } .px-2 { padding-left: ($spacer * .5) !important; padding-right: ($spacer * .5) !important; } .p-3 { padding: $spacer !important; } |
Bootstrap Horizontal Centering
For horizontal centering, Bootstrap provides the.mx-auto class.
This justifies the fixed-width block level content or, in other words, the content that has display property set as block and width by setting the horizontal margins to auto.
The code snippet below illustrates the same:
1 2 | <div class="mx-auto" style="width: 200px;"> </div> |