Margins

Utilities to adjust an element's exterior spacing between other objects.

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. Instead you can use these margin classes to provide that space or the Stack and Flow layouts.

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-m24 margin: 2.4rem !important;
.d-m32 margin: 3.2rem !important;
.d-m48 margin: 4.8rem !important;
.d-m64 margin: 6.4rem !important;
.d-m72 margin: 7.2rem !important;
.d-m84 margin: 8.4rem !important;
.d-m96 margin: 9.6rem !important;
.d-m102 margin: 10.2rem !important;
.d-m114 margin: 11.4rem !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-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-mt72 margin-top: 7.2rem !important;
.d-mt84 margin-top: 8.4rem !important;
.d-mt96 margin-top: 9.6rem !important;
.d-mt102 margin-top: 10.2rem !important;
.d-mt114 margin-top: 11.4rem !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-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-mr72 margin-right: 7.2rem !important;
.d-mr84 margin-right: 8.4rem !important;
.d-mr96 margin-right: 9.6rem !important;
.d-mr102 margin-right: 10.2rem !important;
.d-mr114 margin-right: 11.4rem !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-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-mb72 margin-bottom: 7.2rem !important;
.d-mb84 margin-bottom: 8.4rem !important;
.d-mb96 margin-bottom: 9.6rem !important;
.d-mb102 margin-bottom: 10.2rem !important;
.d-mb114 margin-bottom: 11.4rem !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-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-ml72 margin-left: 7.2rem !important;
.d-ml84 margin-left: 8.4rem !important;
.d-ml96 margin-left: 9.6rem !important;
.d-ml102 margin-left: 10.2rem !important;
.d-ml114 margin-left: 11.4rem !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-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-mx72 margin-right: 7.2rem !important;
margin-left: 7.2rem !important;
.d-mx84 margin-right: 8.4rem !important;
margin-left: 8.4rem !important;
.d-mx96 margin-right: 9.6rem !important;
margin-left: 9.6rem !important;
.d-mx102 margin-right: 10.2rem !important;
margin-left: 10.2rem !important;
.d-mx114 margin-right: 11.4rem !important;
margin-left: 11.4rem !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-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-my72 margin-top: 7.2rem !important;
margin-bottom: 7.2rem !important;
.d-my84 margin-top: 8.4rem !important;
margin-bottom: 8.4rem !important;
.d-my96 margin-top: 9.6rem !important;
margin-bottom: 9.6rem !important;
.d-my102 margin-top: 10.2rem !important;
margin-bottom: 10.2rem !important;
.d-my114 margin-top: 11.4rem !important;
margin-bottom: 11.4rem !important;
.d-my128 margin-top: 12.8rem !important;
margin-bottom: 12.8rem !important;
.d-mn0 margin: -0 !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-mn24 margin: -2.4rem !important;
.d-mn32 margin: -3.2rem !important;
.d-mn48 margin: -4.8rem !important;
.d-mn64 margin: -6.4rem !important;
.d-mn72 margin: -7.2rem !important;
.d-mn84 margin: -8.4rem !important;
.d-mn96 margin: -9.6rem !important;
.d-mn102 margin: -10.2rem !important;
.d-mn114 margin: -11.4rem !important;
.d-mn128 margin: -12.8rem !important;
.d-mtn0 margin-top: -0 !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-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-mtn72 margin-top: -7.2rem !important;
.d-mtn84 margin-top: -8.4rem !important;
.d-mtn96 margin-top: -9.6rem !important;
.d-mtn102 margin-top: -10.2rem !important;
.d-mtn114 margin-top: -11.4rem !important;
.d-mtn128 margin-top: -12.8rem !important;
.d-mrn0 margin-right: -0 !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-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-mrn72 margin-right: -7.2rem !important;
.d-mrn84 margin-right: -8.4rem !important;
.d-mrn96 margin-right: -9.6rem !important;
.d-mrn102 margin-right: -10.2rem !important;
.d-mrn114 margin-right: -11.4rem !important;
.d-mrn128 margin-right: -12.8rem !important;
.d-mbn0 margin-bottom: -0 !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-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-mbn72 margin-bottom: -7.2rem !important;
.d-mbn84 margin-bottom: -8.4rem !important;
.d-mbn96 margin-bottom: -9.6rem !important;
.d-mbn102 margin-bottom: -10.2rem !important;
.d-mbn114 margin-bottom: -11.4rem !important;
.d-mbn128 margin-bottom: -12.8rem !important;
.d-mln0 margin-left: -0 !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-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-mln72 margin-left: -7.2rem !important;
.d-mln84 margin-left: -8.4rem !important;
.d-mln96 margin-left: -9.6rem !important;
.d-mln102 margin-left: -10.2rem !important;
.d-mln114 margin-left: -11.4rem !important;
.d-mln128 margin-left: -12.8rem !important;
.d-mxn0 margin-right: -0 !important;
margin-left: -0 !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-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-mxn72 margin-right: -7.2rem !important;
margin-left: -7.2rem !important;
.d-mxn84 margin-right: -8.4rem !important;
margin-left: -8.4rem !important;
.d-mxn96 margin-right: -9.6rem !important;
margin-left: -9.6rem !important;
.d-mxn102 margin-right: -10.2rem !important;
margin-left: -10.2rem !important;
.d-mxn114 margin-right: -11.4rem !important;
margin-left: -11.4rem !important;
.d-mxn128 margin-right: -12.8rem !important;
margin-left: -12.8rem !important;
.d-myn0 margin-top: -0 !important;
margin-bottom: -0 !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-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-myn72 margin-top: -7.2rem !important;
margin-bottom: -7.2rem !important;
.d-myn84 margin-top: -8.4rem !important;
margin-bottom: -8.4rem !important;
.d-myn96 margin-top: -9.6rem !important;
margin-bottom: -9.6rem !important;
.d-myn102 margin-top: -10.2rem !important;
margin-bottom: -10.2rem !important;
.d-myn114 margin-top: -11.4rem !important;
margin-bottom: -11.4rem !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;

Add margin to all sides

Add margin to a single side

Add horizontal margins

Add vertical margins

Auto margins

Auto margins allow an element to fill a remaining space within an object. This is especially useful in flex layouts.