Angular Bootstrap Spacing
Angular spacing - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.
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. 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 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
-
l
- for classes that setmargin-left
orpadding-left
-
r
- 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 breakpoint is one of:
-
sm
-
md
-
lg
-
xl
Where size is one of:
-
0
- for classes that eliminate the margin orpadding
by setting it to0
-
1
- (by default) for classes that set themargin
orpadding
to$spacer-x
* .25
or$spacer-y * .25
-
2
- (by default) for classes that set themargin
orpadding
to$spacer-x
* .5
or$spacer-y * .5
-
3
- (by default) for classes that set themargin
orpadding
to$spacer-x
or$spacer-y
-
4
- (by default) for classes that set themargin
orpadding
to$spacer-x
* 1.5
or$spacer-y * 1.5
-
5
- (by default) for classes that set themargin
orpadding
to$spacer-x
* 3
or$spacer-y * 3
$spacers
Sass map variable.)
Examples
Here are some representative examples of these classes:
.mt-0 {
margin-top: 0 !important;
}
.ml-1 {
margin-left: ($spacer-x * .25) !important;
}
.px-2 {
padding-left: ($spacer-x * .5) !important;
padding-right: ($spacer-x * .5) !important;
}
.p-3 {
padding: $spacer-y $spacer-x !important;
Responsive spacing
The above mentioned
notation includes the
breakpoint
value and as such allows us to apply spacing responsively. It means that you can condition spacing
of elements depending on the type of display used - similarly to 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 horizonal, but once the viewport gets narrower
and the
.nav-item
s 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.
Consider the table below:
Screen Size | Class |
---|---|
Appears on all |
.ml-3
|
Appears only on xs |
.ml-3 .ml-sm-0
|
Appears only on sm |
.ml-sm-3 .ml-md-0
|
Appears only on md |
.ml-md-3 .ml-lg-0
|
Appears only on lg |
.ml-lg-3 .d-xl-0
|
Appears only on xl |
.ml-xl-3
|
This is a regularly spaced paraph.
And this one has left margin visible on
xs
,
sm
and
md
displays.
<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
display: block
and a
width
set—by setting the horizontal margins to
auto
.
<div class="mx-auto" style="width: 200px; background-color: rgba(86,61,124,.15);">
Centered element
</div>
Negative margin
In CSS, margin
properties can utilize negative values (padding
cannot). As of 4.2, we’ve added negative margin utilities for every non-zero integer size listed above (e.g., 1
, 2
, 3
, 4
, 5
). These utilities are ideal for customizing grid column gutters across breakpoints.
The syntax is nearly the same as the default, positive margin utilities, but with the addition of n
before the requested size. Here’s an example class that’s the opposite of .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
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
.
<div class="row mx-md-n5">
<div class="col py-3 px-md-5 bordered col-example">Custom column padding</div>
<div class="col py-3 px-md-5 bordered col-example">Custom column padding</div>
</div>