Spacing
Thedir includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance.
How it works #
Assign responsive-friendly margin or
padding values to an element or a subset
of
its sides with shorthand classes. Includes support for individual properties,
all properties, and vertical and horizontal properties.
Notation #
Spacing utilities that apply to all breakpoints, from xs to xl, have no
breakpoint abbreviation in them. This is because those classes are applied from
min-width: 0 and up, and thus are not
bound by a media query. The remaining
breakpoints, however, do include a breakpoint abbreviation.
The classes are named using the format {property}{sides}-{size}
for xs and
{property}{sides}-{breakpoint}-{size} for
sm, md, lg, and xl.
Where property is one of:
m- for classes that setmarginp- for classes that setpadding
Where sides is one of:
t- for classes that setmargin-toporpadding-topb- for classes that setmargin-bottomorpadding-bottoml- for classes that setmargin-leftorpadding-leftr- for classes that setmargin-rightorpadding-rightx- for classes that set both*-leftand*-right-
y- for classes that set both*-topand*-bottom - blank - for classes that set a
marginorpaddingon all 4 sides of the element
Where size is one of:
0- for classes that eliminate themarginorpaddingby setting it to01- (by default) for classes that set themarginorpaddingto$spacer * .31252- (by default) for classes that set the margin or padding to$spacer * .6253- (by default) for classes that set themarginorpaddingto$spacer4- (by default) for classes that set themarginorpaddingto$spacer * 1.255- (by default) for classes that set themarginorpaddingto$spacer * 1.56- (by default) for classes that set themarginorpaddingto$spacer * 1.8757- (by default) for classes that set themarginorpaddingto$spacer * 2.58- (by default) for classes that set themarginorpaddingto$spacer * 3.1259- (by default) for classes that set themarginorpaddingto$spacer * 4.37510- (by default) for classes that set themarginorpaddingto$spacer * 511- (by default) for classes that set themarginorpaddingto$spacer * 5.62512- (by default) for classes that set themarginorpaddingto$spacer * 6.2513- (by default) for classes that set themarginorpaddingto$spacer * 7.514- (by default) for classes that set themarginorpaddingto$spacer * 9.375auto- for classes that set themarginto auto
(You can add more sizes by adding entries to the $spacers Sass map variable via:
_variables.scss.)
Offset spacings #
Thedir includes several offset classes, like:
<div class="ml-n2">.ml-n2</div>
<div class="ml-n3">.ml-n3</div>
<div class="mr-n2">.mr-n2</div>
<div class="mt-n1">.mt-n1</div>
<div class="mt-n5">.mt-n5</div>
<div class="mt-n6">.mt-n6</div>
<div class="mt-n9">.mt-n9</div>
<div class="mb-n9">.mb-n9</div>Examples
Here are some representative examples of these classes:
.mt-0 {
margin-top: 0 !important;
}
.ml-1 {
margin-left: ($spacer * .3125) !important;
}
.px-2 {
left: ($spacer * .625) !important;
padding-right: ($spacer * .625) !important;
}
.p-3 {
padding: $spacer !important;
}Horizontal centering #
Additionally, Thedir also includes an .mx-auto class for horizontally centering
fixed-width block level content—that is, content that has display: block and a
width set—by setting the horizontal
margins to auto.
<div class="mx-auto bg-primary text-white" style="width: 200px;">
Centered element
</div>