Spacing
The Vitamin Bootstrap framework includes comprehensive spacing options that allow you to easily add padding and margins to your web pages. With a simple class structure, you can create visually appealing designs with consistent spacing across all elements. Whether you're working on a header, footer, or content section, the spacing classes in Vitamin make it easy to add the right amount of whitespace to your design. With Vitamin, you can say goodbye to the hassle of manually calculating and adding spacing, and say hello to faster, more intuitive design.
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.
Spacing utilities that apply to all breakpoints, from xs
to xxl
, 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
, xl
, and xxl
.
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
- (start) for classes that setmargin-left
orpadding-left
in LTR,margin-right
orpadding-right
in RTLe
- (end) for classes that setmargin-right
orpadding-right
in LTR,margin-left
orpadding-left
in RTLx
- 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
- for classes that set themargin
orpadding
to$spacer * .25
2
- for classes that set themargin
orpadding
to$spacer * .5
3
- for classes that set themargin
orpadding
to$spacer
4
- for classes that set themargin
orpadding
to$spacer * 1.5
5
- for classes that set themargin
orpadding
to$spacer * 3
auto
- for classes that set themargin
to auto
from here, vitamin bootstrap:6
- for classes that set themargin
orpadding
to$spacer * 4
7
- for classes that set themargin
orpadding
to$spacer * 5
8
- for classes that set themargin
orpadding
to$spacer * 6
9
- for classes that set themargin
orpadding
to$spacer * 7
10
- for classes that set themargin
orpadding
to$spacer * 8
Examples
Here are some representative examples of these classes:
.mt-0 {
margin-top: 0 !important;
}
.ms-6 {
margin-left: ($spacer * 4) !important;
}
.px-10 {
padding-left: ($spacer * 8) !important;
padding-right: ($spacer * 8) !important;
}
.p-7 {
padding: ($spacer * 5) !important;
}
Negative Margin
In CSS, margin
properties can utilize negative values (padding
cannot).
On vitamin These negative margins are enabled by default, so you can use whenever
you want.
.mt-n6 {
margin-top: -4rem !important;
}
Gap
from here vitamin
Support includes responsive options for all of
Bootstrap’s grid breakpoints, as well as six sizes from the $spacers
map
(0
–10
). There is no .gap-auto
utility class as it’s
effectively the same as .gap-0
.
Maps
$spacer: 1rem;
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
6: $spacer * 4,
7: $spacer * 5,
8: $spacer * 6,
9: $spacer * 7,
10: $spacer * 8,
);