Bootstrap 4 comes with different spacing utilities that help us in responsive design. One of these is the margin
utility classes.
They work for all breakpoints.
xs
(<=576px)sm
(>=576px)md
(>=768px)lg
(>=992px)xl
(>=1200px)The utility classes are used in this format:
{property}{sides}-{breakpoint}-{size}
This is the same for all breakpoints, except the xs
, which is used in this format:
{property}{sides}-{size}
This syntax is very easy to use, and a developer needs to study its components. The shorthand for the components is explained below.
The property
is margin
, and is denoted by m
.
The sides include:
t
: Sets the margin-top
.b
: Sets the margin-bottom
.l
: Sets the margin-left
.r
: Sets the margin-right
.x
: Sets the margin-left
and margin-right
.y
: Sets the margin-top
and margin-bottom
.The sizes include the following:
0
: Sets the margin
to 0.1
: Sets the margin
to .25rem. This will be 4px if the font size is 16px, that is, 25% of the spacer.2
: Sets the margin
to .5rem. This will be 8px if the font size is 16px, that is, 50% of the spacer.3
: Sets the margin
to 1rem. This will be 16px if the font size is 16px, that is, 100% of the spacer.4
: Sets the margin
to 1.5rem. This will be 24px if the font size is 16px, that is, 150% of the spacer.5
: Sets the margin
to 3rem. This will be 48px if the font size is 16px, that is, 300% of the spacer.auto
: Sets the margin
to auto.Note:
We can also set margin
to negative. This is done by adding n
in front of the size.
For example, n1
sets the margin
to -.25rem. This will be -4px if the font size is 16px.
You can set fixed-width block-level content to the center horizontally by setting the horizontal margins to auto
.
class="mx-auto"
The code above moves the div
to the center.
Fixed-width block-level content refers to an element that has its display set to
block
, and haswidth
set.
You can keep practicing to improve your understanding.