Margins
Utilities to adjust an element's exterior spacing between other objects.
Add Margin to All Sides #
<div class="d-m24 ...">d-m24</div>
Add Margin to a Single Side #
<div class="d-mt12 ...">d-mt12</div>
<div class="d-mr16 ...">d-mr16</div>
<div class="d-mb24 ...">d-mb24</div>
<div class="d-ml32 ...">d-ml32</div>
Add Horizontal Margins #
<div class="d-mx24 ...">d-mx24</div>
Add Vertical Margins #
<div class="d-my24 ...">d-my24</div>
Auto Margins #
Auto margins allow an element to fill a remaining space within an object. This is especially useful in flex layouts.
<div class="d-mx-auto ...">d-mx-auto</div>
<div class="d-ml-auto ...">d-ml-auto</div>
<div class="d-mr-auto ...">d-mr-auto</div>
Classes #
Margins can be added to an element by using a utility class (i.e. .d-m[#]) or by using a directional class (i.e. .d-m{t|r|b|l|y|x}[#]).
The margin utility classes help visually separate elements. Because layouts are highly contextual, margins are never applied natively to a component's outer wrapper.
It is highly recommended to use the stack component or the auto spacing classes prior to applying margins individually.
Class
|
Output
|
|---|---|
| .d-m0 | margin: 0 !important |
| .d-m1 | margin: .1rem !important |
| .d-m2 | margin: .2rem !important |
| .d-m4 | margin: .4rem !important |
| .d-m6 | margin: .6rem !important |
| .d-m8 | margin: .8rem !important |
| .d-m12 | margin: 1.2rem !important |
| .d-m16 | margin: 1.6rem !important |
| .d-m20 | margin: 2.0rem !important |
| .d-m24 | margin: 2.4rem !important |
| .d-m32 | margin: 3.2rem !important |
| .d-m48 | margin: 4.8rem !important |
| .d-m64 | margin: 6.4rem !important |
| .d-m96 | margin: 9.6rem !important |
| .d-m128 | margin: 12.8rem !important |
| .d-mt0 | margin-top: 0 !important; |
| .d-mt1 | margin-top: .1rem !important; |
| .d-mt2 | margin-top: .2rem !important; |
| .d-mt4 | margin-top: .4rem !important; |
| .d-mt6 | margin-top: .6rem !important; |
| .d-mt8 | margin-top: .8rem !important; |
| .d-mt12 | margin-top: 1.2rem !important; |
| .d-mt16 | margin-top: 1.6rem !important; |
| .d-mt20 | margin-top: 2.0rem !important; |
| .d-mt24 | margin-top: 2.4rem !important; |
| .d-mt32 | margin-top: 3.2rem !important; |
| .d-mt48 | margin-top: 4.8rem !important; |
| .d-mt64 | margin-top: 6.4rem !important; |
| .d-mt96 | margin-top: 9.6rem !important; |
| .d-mt128 | margin-top: 12.8rem !important; |
| .d-mr0 | margin-right: 0 !important; |
| .d-mr1 | margin-right: .1rem !important; |
| .d-mr2 | margin-right: .2rem !important; |
| .d-mr4 | margin-right: .4rem !important; |
| .d-mr6 | margin-right: .6rem !important; |
| .d-mr8 | margin-right: .8rem !important; |
| .d-mr12 | margin-right: 1.2rem !important; |
| .d-mr16 | margin-right: 1.6rem !important; |
| .d-mr20 | margin-right: 2.0rem !important; |
| .d-mr24 | margin-right: 2.4rem !important; |
| .d-mr32 | margin-right: 3.2rem !important; |
| .d-mr48 | margin-right: 4.8rem !important; |
| .d-mr64 | margin-right: 6.4rem !important; |
| .d-mr96 | margin-right: 9.6rem !important; |
| .d-mr128 | margin-right: 12.8rem !important; |
| .d-mb0 | margin-bottom: 0 !important; |
| .d-mb1 | margin-bottom: .1rem !important; |
| .d-mb2 | margin-bottom: .2rem !important; |
| .d-mb4 | margin-bottom: .4rem !important; |
| .d-mb6 | margin-bottom: .6rem !important; |
| .d-mb8 | margin-bottom: .8rem !important; |
| .d-mb12 | margin-bottom: 1.2rem !important; |
| .d-mb16 | margin-bottom: 1.6rem !important; |
| .d-mb20 | margin-bottom: 2.0rem !important; |
| .d-mb24 | margin-bottom: 2.4rem !important; |
| .d-mb32 | margin-bottom: 3.2rem !important; |
| .d-mb48 | margin-bottom: 4.8rem !important; |
| .d-mb64 | margin-bottom: 6.4rem !important; |
| .d-mb96 | margin-bottom: 9.6rem !important; |
| .d-mb128 | margin-bottom: 12.8rem !important; |
| .d-ml0 | margin-left: 0 !important; |
| .d-ml1 | margin-left: .1rem !important; |
| .d-ml2 | margin-left: .2rem !important; |
| .d-ml4 | margin-left: .4rem !important; |
| .d-ml6 | margin-left: .6rem !important; |
| .d-ml8 | margin-left: .8rem !important; |
| .d-ml12 | margin-left: 1.2rem !important; |
| .d-ml16 | margin-left: 1.6rem !important; |
| .d-ml20 | margin-left: 2.0rem !important; |
| .d-ml24 | margin-left: 2.4rem !important; |
| .d-ml32 | margin-left: 3.2rem !important; |
| .d-ml48 | margin-left: 4.8rem !important; |
| .d-ml64 | margin-left: 6.4rem !important; |
| .d-ml96 | margin-left: 9.6rem !important; |
| .d-ml128 | margin-left: 12.8rem !important; |
| .d-mx0 |
margin-right: 0 !important; margin-left: 0 !important; |
| .d-mx1 |
margin-right: .1rem !important; margin-left: .1rem !important; |
| .d-mx2 |
margin-right: .2rem !important; margin-left: .2rem !important; |
| .d-mx4 |
margin-right: .4rem !important; margin-left: .4rem !important; |
| .d-mx6 |
margin-right: .6rem !important; margin-left: .6rem !important; |
| .d-mx8 |
margin-right: .8rem !important; margin-left: .8rem !important; |
| .d-mx12 |
margin-right: 1.2rem !important; margin-left: 1.2rem !important; |
| .d-mx16 |
margin-right: 1.6rem !important; margin-left: 1.6rem !important; |
| .d-mx20 |
margin-right: 2.0rem !important; margin-left: 2.0rem !important; |
| .d-mx24 |
margin-right: 2.4rem !important; margin-left: 2.4rem !important; |
| .d-mx32 |
margin-right: 3.2rem !important; margin-left: 3.2rem !important; |
| .d-mx48 |
margin-right: 4.8rem !important; margin-left: 4.8rem !important; |
| .d-mx64 |
margin-right: 6.4rem !important; margin-left: 6.4rem !important; |
| .d-mx96 |
margin-right: 9.6rem !important; margin-left: 9.6rem !important; |
| .d-mx128 |
margin-right: 12.8rem !important; margin-left: 12.8rem !important; |
| .d-my0 |
margin-top: 0 !important; margin-bottom: 0 !important; |
| .d-my1 |
margin-top: .1rem !important; margin-bottom: .1rem !important; |
| .d-my2 |
margin-top: .2rem !important; margin-bottom: .2rem !important; |
| .d-my4 |
margin-top: .4rem !important; margin-bottom: .4rem !important; |
| .d-my6 |
margin-top: .6rem !important; margin-bottom: .6rem !important; |
| .d-my8 |
margin-top: .8rem !important; margin-bottom: .8rem !important; |
| .d-my12 |
margin-top: 1.2rem !important; margin-bottom: 1.2rem !important; |
| .d-my16 |
margin-top: 1.6rem !important; margin-bottom: 1.6rem !important; |
| .d-my20 |
margin-top: 2.0rem !important; margin-bottom: 2.0rem !important; |
| .d-my24 |
margin-top: 2.4rem !important; margin-bottom: 2.4rem !important; |
| .d-my32 |
margin-top: 3.2rem !important; margin-bottom: 3.2rem !important; |
| .d-my48 |
margin-top: 4.8rem !important; margin-bottom: 4.8rem !important; |
| .d-my64 |
margin-top: 6.4rem !important; margin-bottom: 6.4rem !important; |
| .d-my96 |
margin-top: 9.6rem !important; margin-bottom: 9.6rem !important; |
| .d-my128 |
margin-top: 12.8rem !important; margin-bottom: 12.8rem !important; |
| .d-mn1 | margin: -.1rem !important |
| .d-mn2 | margin: -.2rem !important |
| .d-mn4 | margin: -.4rem !important |
| .d-mn6 | margin: -.6rem !important |
| .d-mn8 | margin: -.8rem !important |
| .d-mn12 | margin: -1.2rem !important |
| .d-mn16 | margin: -1.6rem !important |
| .d-mn20 | margin: -2.0rem !important |
| .d-mn24 | margin: -2.4rem !important |
| .d-mn32 | margin: -3.2rem !important |
| .d-mn48 | margin: -4.8rem !important |
| .d-mn64 | margin: -6.4rem !important |
| .d-mn96 | margin: -9.6rem !important |
| .d-mn128 | margin: -12.8rem !important |
| .d-mtn1 | margin-top: -.1rem !important; |
| .d-mtn2 | margin-top: -.2rem !important; |
| .d-mtn4 | margin-top: -.4rem !important; |
| .d-mtn6 | margin-top: -.6rem !important; |
| .d-mtn8 | margin-top: -.8rem !important; |
| .d-mtn12 | margin-top: -1.2rem !important; |
| .d-mtn16 | margin-top: -1.6rem !important; |
| .d-mtn20 | margin-top: -2.0rem !important; |
| .d-mtn24 | margin-top: -2.4rem !important; |
| .d-mtn32 | margin-top: -3.2rem !important; |
| .d-mtn48 | margin-top: -4.8rem !important; |
| .d-mtn64 | margin-top: -6.4rem !important; |
| .d-mtn96 | margin-top: -9.6rem !important; |
| .d-mtn128 | margin-top: -12.8rem !important; |
| .d-mrn1 | margin-right: -.1rem !important; |
| .d-mrn2 | margin-right: -.2rem !important; |
| .d-mrn4 | margin-right: -.4rem !important; |
| .d-mrn6 | margin-right: -.6rem !important; |
| .d-mrn8 | margin-right: -.8rem !important; |
| .d-mrn12 | margin-right: -1.2rem !important; |
| .d-mrn16 | margin-right: -1.6rem !important; |
| .d-mrn20 | margin-right: -2.0rem !important; |
| .d-mrn24 | margin-right: -2.4rem !important; |
| .d-mrn32 | margin-right: -3.2rem !important; |
| .d-mrn48 | margin-right: -4.8rem !important; |
| .d-mrn64 | margin-right: -6.4rem !important; |
| .d-mrn96 | margin-right: -9.6rem !important; |
| .d-mrn128 | margin-right: -12.8rem !important; |
| .d-mbn1 | margin-bottom: -.1rem !important; |
| .d-mbn2 | margin-bottom: -.2rem !important; |
| .d-mbn4 | margin-bottom: -.4rem !important; |
| .d-mbn6 | margin-bottom: -.6rem !important; |
| .d-mbn8 | margin-bottom: -.8rem !important; |
| .d-mbn12 | margin-bottom: -1.2rem !important; |
| .d-mbn16 | margin-bottom: -1.6rem !important; |
| .d-mbn20 | margin-bottom: -2.0rem !important; |
| .d-mbn24 | margin-bottom: -2.4rem !important; |
| .d-mbn32 | margin-bottom: -3.2rem !important; |
| .d-mbn48 | margin-bottom: -4.8rem !important; |
| .d-mbn64 | margin-bottom: -6.4rem !important; |
| .d-mbn96 | margin-bottom: -9.6rem !important; |
| .d-mbn128 | margin-bottom: -12.8rem !important; |
| .d-mln1 | margin-left: -.1rem !important; |
| .d-mln2 | margin-left: -.2rem !important; |
| .d-mln4 | margin-left: -.4rem !important; |
| .d-mln6 | margin-left: -.6rem !important; |
| .d-mln8 | margin-left: -.8rem !important; |
| .d-mln12 | margin-left: -1.2rem !important; |
| .d-mln16 | margin-left: -1.6rem !important; |
| .d-mln20 | margin-left: -2.0rem !important; |
| .d-mln24 | margin-left: -2.4rem !important; |
| .d-mln32 | margin-left: -3.2rem !important; |
| .d-mln48 | margin-left: -4.8rem !important; |
| .d-mln64 | margin-left: -6.4rem !important; |
| .d-mln96 | margin-left: -9.6rem !important; |
| .d-mln128 | margin-left: -12.8rem !important; |
| .d-mxn1 |
margin-right: -.1rem !important; margin-left: -.1rem !important; |
| .d-mxn2 |
margin-right: -.2rem !important; margin-left: -.2rem !important; |
| .d-mxn4 |
margin-right: -.4rem !important; margin-left: -.4rem !important; |
| .d-mxn6 |
margin-right: -.6rem !important; margin-left: -.6rem !important; |
| .d-mxn8 |
margin-right: -.8rem !important; margin-left: -.8rem !important; |
| .d-mxn12 |
margin-right: -1.2rem !important; margin-left: -1.2rem !important; |
| .d-mxn16 |
margin-right: -1.6rem !important; margin-left: -1.6rem !important; |
| .d-mxn20 |
margin-right: -2.0rem !important; margin-left: -2.0rem !important; |
| .d-mxn24 |
margin-right: -2.4rem !important; margin-left: -2.4rem !important; |
| .d-mxn32 |
margin-right: -3.2rem !important; margin-left: -3.2rem !important; |
| .d-mxn48 |
margin-right: -4.8rem !important; margin-left: -4.8rem !important; |
| .d-mxn64 |
margin-right: -6.4rem !important; margin-left: -6.4rem !important; |
| .d-mxn96 |
margin-right: -9.6rem !important; margin-left: -9.6rem !important; |
| .d-mxn128 |
margin-right: -12.8rem !important; margin-left: -12.8rem !important; |
| .d-myn1 |
margin-top: -.1rem !important; margin-bottom: -.1rem !important; |
| .d-myn2 |
margin-top: -.2rem !important; margin-bottom: -.2rem !important; |
| .d-myn4 |
margin-top: -.4rem !important; margin-bottom: -.4rem !important; |
| .d-myn6 |
margin-top: -.6rem !important; margin-bottom: -.6rem !important; |
| .d-myn8 |
margin-top: -.8rem !important; margin-bottom: -.8rem !important; |
| .d-myn12 |
margin-top: -1.2rem !important; margin-bottom: -1.2rem !important; |
| .d-myn16 |
margin-top: -1.6rem !important; margin-bottom: -1.6rem !important; |
| .d-myn20 |
margin-top: -2.0rem !important; margin-bottom: -2.0rem !important; |
| .d-myn24 |
margin-top: -2.4rem !important; margin-bottom: -2.4rem !important; |
| .d-myn32 |
margin-top: -3.2rem !important; margin-bottom: -3.2rem !important; |
| .d-myn48 |
margin-top: -4.8rem !important; margin-bottom: -4.8rem !important; |
| .d-myn64 |
margin-top: -6.4rem !important; margin-bottom: -6.4rem !important; |
| .d-myn96 |
margin-top: -9.6rem !important; margin-bottom: -9.6rem !important; |
| .d-myn128 |
margin-top: -12.8rem !important; margin-bottom: -12.8rem !important; |
| .d-m-auto | margin: auto !important |
| .d-mt-auto | margin-top: auto !important; |
| .d-mr-auto | margin-right: auto !important; |
| .d-mb-auto | margin-bottom: auto !important; |
| .d-ml-auto | margin-left: auto !important; |
| .d-mx-auto |
margin-right: auto !important; margin-left: auto !important; |
| .d-my-auto |
margin-top: auto !important; margin-bottom: auto !important; |
| .d-m-unset | margin: unset !important |
| .d-mt-unset | margin-top: unset !important; |
| .d-mr-unset | margin-right: unset !important; |
| .d-mb-unset | margin-bottom: unset !important; |
| .d-ml-unset | margin-left: unset !important; |
| .d-mx-unset |
margin-right: unset !important; margin-left: unset !important; |
| .d-my-unset |
margin-top: unset !important; margin-bottom: unset !important; |