{** *The classes are named using the format .p{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl. * * * Where sides is one of: * * t - for classes that set padding-top * b - for classes that set padding-bottom * l - for classes that set padding-left * r - for classes that set padding-right * x - for classes that set both *-left and *-right * y - for classes that set both *-top and *-bottom * blank - for classes that set a padding on all 4 sides of the element * * Where size is one of: * * 0 - for classes that eliminate the padding or padding by setting it to 0 * 1 - (by default) for classes that set the padding to $spacer * .25 * 2 - (by default) for classes that set the padding to $spacer * .5 * 3 - (by default) for classes that set the padding to $spacer * 4 - (by default) for classes that set the padding to $spacer * 2 * 25 - (by default) for classes that set the padding to 25% of width * 50 - (by default) for classes that set the padding to 50% of width * 75 - (by default) for classes that set the padding to 75% of width * 100 - (by default) for classes that set the padding to 100% of width * * $spacer value could be redefine by $spacer variable in variables.scss. *}
How it works
Assign responsive-friendly 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. Classes are built from a default Sass map ranging from .25rem
to 3rem
.
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: p - for classes that set padding
Where sides is one of:
t
- for classes that set padding-top
b
- for classes that set padding-bottom
l
- for classes that set padding-left
r
- for classes that set padding-right
x
- for classes that set both *-left
and *-right
y
- for classes that set both *-top
and *-bottom
padding
or padding
on all 4 sides of the elementWhere size is one of:
0
- for classes that eliminate the padding
by setting it to 0
1
- (by default) for classes that set the padding
to $spacer * .25
2
- (by default) for classes that set the padding
to $spacer * .5
3
- (by default) for classes that set the padding
to $spacer
4
- (by default) for classes that set the padding
to $spacer * 1.5
5
- (by default) for classes that set the padding
to $spacer * 3
auto
- for classes that set the padding
to auto(You can add more sizes by adding entries to the $spacers
Sass map variable.)
Example
Here are some representative examples of these classes:
.mt-0 { padding-top: 0 !important; } .ml-1 { padding-left: ($spacer * .25) !important; } .px-2 { padding-left: ($spacer * .5) !important; padding-right: ($spacer * .5) !important; } .p-3 { padding: $spacer !important; }