Use shorthand margin and padding utility classes to control spacing between elements.
Spacing utility classes can be defined using the format -{property}{sides}[-{breakpoint}]--{size}
.
m
- use to apply margin
p
- use to apply padding
t
- use to apply margin-top
or padding-top
b
- use to apply margin-bottom
or padding-bottom
l
- use to apply margin-left
or padding-left
r
- use to apply margin-right
or padding-right
x
- use to apply margin-left
and margin-right
or padding-left
and padding-right
y
- use to apply margin-top
and margin-bottom
or padding-top
and padding-bottom
margin
or padding
to all 4 sides.Optionally include -{breakpoint} to apply the utility behaviour to some breakpoints. As a mobile first library, any applying to smaller breakpoint will modify also larger ones unless other class overrides this behaviour.
margin
or padding
to all breakpoints.sm
- use to apply margin
or padding
to sm and larger breakpoints.md
- use to apply margin
or padding
to md and larger breakpoints.lg
- use to apply margin
or padding
to lg and larger breakpoints.xl
- use to apply margin
or padding
to xl breakpoints.0
- use to eliminate existing margin
or padding
and set to 0
1
- use to set margin
or padding
to $base-unit
2
- use to set margin
or padding
to $base-unit * 2
3
- use to set margin
or padding
to $base-unit * 3
4
- use to set margin
or padding
to $base-unit * 4
5
- use to set margin
or padding
to $base-unit * 5
6
- use to set margin
or padding
to $base-unit * 6
7
- use to set margin
or padding
to $base-unit * 7
8
- use to set margin
or padding
to $base-unit * 8
9
- use to set margin
or padding
to $base-unit * 9
10
- use to set margin
or padding
to $base-unit * 10
auto
- use to set margin
to auto
valueIn this example, various margin classes have been applied to render margin on all 4 sides of the pink squares. The margin can be visualized in blue.
<div class="-m--2"></div>
<div class="-m--4"></div>
<div class="-m--6"></div>
Apply margin to specific sides of an element by adding t
,
b
, l
, r
, x
or y
to the class name.
<!-- margin-top -->
<div class="-mt--3"></div>
<!-- margin-bottom -->
<div class="-mb--3"></div>
<!-- margin-left -->
<div class="-ml--3"></div>
<!-- margin-right -->
<div class="-mr--3"></div>
<!-- margin-left and margin-right -->
<div class="-mx--3"></div>
<!-- margin-top and margin-bottom -->
<div class="-my--3"></div>
In this example, various padding classes have been applied to render padding on all 4 sides of the pink squares. The padding can be visualized in yellow.
<div class="-p--2"></div>
<div class="-p--4"></div>
<div class="-p--6"></div>
Apply padding to specific sides of an element by adding t
,
b
, l
, r
, x
or y
to the class name.
<!-- padding-top -->
<div class="-pt--3"></div>
<!-- padding-bottom -->
<div class="-pb--3"></div>
<!-- padding-left -->
<div class="-pl--3"></div>
<!-- padding-right -->
<div class="-pr--3"></div>
<!-- padding-left and padding-right -->
<div class="-px--3"></div>
<!-- padding-top and padding-bottom -->
<div class="-py--3"></div>
Apply both margin and padding to an element by adding both class names.
<div class="-m--3 -p--3"></div>
Apply margin auto to an element
<div class="-m--auto"></div>
Target specific breakpoints with responsive classes.
<div class="-mx--0 -px--0 -mx-lg--6 -px-lg--6"></div>