CSS for Spacing
Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.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 set margin
p
- for classes that set padding
Where sides is one of:
t
- for classes that set margin-top
or padding-top
b
- for classes that set margin-bottom
or padding-bottom
l
- for classes that set margin-left
or padding-left
r
- for classes that set margin-right
or padding-right
x
- for classes that set both *-left
and *-right
y
- for classes that set both *-top
and *-bottom
margin
or padding
on all 4 sides of the elementWhere size is one of:
0
- for classes that eliminate the margin
or padding
by setting it to 0
1
- (by default) for classes that set the margin
or padding
to .25
2
- (by default) for classes that set the margin
or padding
to .5
3
- (by default) for classes that set the margin
or padding
to 1
4
- (by default) for classes that set the margin
or padding
to 1.5
5
- (by default) for classes that set the margin
or padding
to 3
auto
- for classes that set the margin
to auto.text-left - Left aligned text on all viewport sizes.
.text-center - Center aligned text on all viewport sizes.
.text-right - Right aligned text on all viewport sizes.
.text-sm-left - Left aligned text on viewports sized SM (small) or wider.
.text-md-left - Left aligned text on viewports sized MD (medium) or wider.
.text-lg-left - Left aligned text on viewports sized LG (large) or wider.
.text-xl-left - Left aligned text on viewports sized XL (extra-large) or wider.
.text-monospace - This is in monospace