Bootstrap includes a wide range of shorthand responsive margin utility classes to modify an element’s appearance.
Detailed documentation and more examples of Bootstrap padding you can find in our Bootstrap Spacing Docs.
Example: Usage pr-* class.
p - for classes that set padding
r - for classes that set padding-right
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 breakpoint is one of:
sm
md
lg
xl
Where 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
$spacer-x
* .25 or
$spacer-y * .25
2 - (by default) for classes that set the
margin or
padding to
$spacer-x
* .5 or
$spacer-y * .5
3 - (by default) for classes that set the
margin or
padding to
$spacer-x or
$spacer-y
4 - (by default) for classes that set the
margin or
padding to
$spacer-x
* 1.5 or
$spacer-y * 1.5
5 - (by default) for classes that set the
margin or
padding to
$spacer-x
* 3 or
$spacer-y * 3
$spacers Sass map variable.)