Spacing

Bootstrap spacing

Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s
appearance.

You can easily assign responsive-friendly
margin or
padding values to an element or a subset of its sides with shorthand classes. They include 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:

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

blank - for classes that set a
margin or
padding on all 4 sides of the element

Where
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

(You can add more sizes by adding entries to the
$spacers Sass map variable.)

Responsive spacing

The above - mentioned
notation includes the
breakpoint value and as such allows us to apply spacing responsively. It also means that you can make
conditional the
spacing
of elements depending on the type of display used — similarly to the logic found in
display property.

Let's say you want to prepare a fully responsive
navbar. Some elements within may require
setting them a bit further apart by applying additional margin — with
.ml-3, for example. All looks good while the containing element stays horizontal, but once the
viewport
gets narrower
and the
.nav-items align vertically, the spacing utility used becomes obsolete (as the item is pushed to the
right and
stands out). The solution here is setting a responsive spacing utility — one that appears only when you really want
it
to.

<p>This is a regularly spaced paraph.</p>
<p class="ml-5 ml-lg-0">And this one has left margin visible on xs, sm and md displays.</p>

Horizontal centering

Additionally, Bootstrap also includes an
.mx-auto class for horizontally centering fixed-width block level content — that is, content that has
a
display: block and a
width set — by setting the horizontal margins to
auto.

Here’s an example of customizing the Bootstrap grid at the medium (md) breakpoint and above. We’ve increased the .col padding with .px-md-5 and then counteracted that with .mx-md-n5 on the parent .row.