Spacing
Upgency includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance.
Margin and Padding
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 setmargin
p
- for classes that setpadding
Where sides is one of:
t
- for classes that setmargin-top
orpadding-top
b
- for classes that setmargin-bottom
orpadding-bottom
s
- for classes that setmargin-left
orpadding-left
e
- for classes that setmargin-right
orpadding-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
margin
orpadding
on all 4 sides of the element
Where size is one of:
0
- for classes that eliminate themargin
orpadding
by setting it to0
1
- (by default) for classes that set themargin
orpadding
to.25
2
- (by default) for classes that set themargin
orpadding
to.5
3
- (by default) for classes that set themargin
orpadding
to1
4
- (by default) for classes that set themargin
orpadding
to1.5
5
- (by default) for classes that set themargin
orpadding
to3
6
- (by default) for classes that set themargin
orpadding
to4.5
7
- (by default) for classes that set themargin
orpadding
to6
8
- (by default) for classes that set themargin
orpadding
to7.5
9
- (by default) for classes that set themargin
orpadding
to9
auto
- for classes that set themargin
to auto
<div class="ms-1">margin left .25rem</div>
<div class="me-2">margin right .5rem</div>
<div class="mt-3">margin top 1rem</div>
<div class="mb-4">margin bottom 1.5rem</div>
<div class="mx-6">margin horizontal 4.5rem</div>
<div class="my-7">margin vertical 6rem</div>
You can editing sizes from: src/scss/_variables.scss
Editing spacing code from src/scss/bootstrap/utilities/_spacing.scss
Read more documentation in here