Skip to main contentSkip to docs navigation

Margin

Use margin utilities to responsively control the space around elements.

MDNMDN Reference
View & Edit
On this page
ClassStyles
.m-0margin: 0;
.m-1margin: 0.25rem;
.m-2margin: 0.5rem;
.m-3margin: 0.75rem;
.m-4margin: 1rem;
.m-5margin: 1.25rem;
.m-6margin: 1.5rem;
.m-7margin: 2rem;
.m-8margin: 2.5rem;
.m-9margin: 3rem;
.m-automargin: auto;
.mx-0margin-inline: 0;
.mx-1margin-inline: 0.25rem;
.mx-2margin-inline: 0.5rem;
.mx-3margin-inline: 0.75rem;
.mx-4margin-inline: 1rem;
.mx-5margin-inline: 1.25rem;
.mx-6margin-inline: 1.5rem;
.mx-7margin-inline: 2rem;
.mx-8margin-inline: 2.5rem;
.mx-9margin-inline: 3rem;
.mx-automargin-inline: auto;
.my-0margin-block: 0;
.my-1margin-block: 0.25rem;
.my-2margin-block: 0.5rem;
.my-3margin-block: 0.75rem;
.my-4margin-block: 1rem;
.my-5margin-block: 1.25rem;
.my-6margin-block: 1.5rem;
.my-7margin-block: 2rem;
.my-8margin-block: 2.5rem;
.my-9margin-block: 3rem;
.my-automargin-block: auto;
.mt-0margin-block-start: 0;
.mt-1margin-block-start: 0.25rem;
.mt-2margin-block-start: 0.5rem;
.mt-3margin-block-start: 0.75rem;
.mt-4margin-block-start: 1rem;
.mt-5margin-block-start: 1.25rem;
.mt-6margin-block-start: 1.5rem;
.mt-7margin-block-start: 2rem;
.mt-8margin-block-start: 2.5rem;
.mt-9margin-block-start: 3rem;
.mt-automargin-block-start: auto;
.me-0margin-inline-end: 0;
.me-1margin-inline-end: 0.25rem;
.me-2margin-inline-end: 0.5rem;
.me-3margin-inline-end: 0.75rem;
.me-4margin-inline-end: 1rem;
.me-5margin-inline-end: 1.25rem;
.me-6margin-inline-end: 1.5rem;
.me-7margin-inline-end: 2rem;
.me-8margin-inline-end: 2.5rem;
.me-9margin-inline-end: 3rem;
.me--1margin-inline-end: -0.25rem;
.me--2margin-inline-end: -0.5rem;
.me-automargin-inline-end: auto;
.mb-0margin-block-end: 0;
.mb-1margin-block-end: 0.25rem;
.mb-2margin-block-end: 0.5rem;
.mb-3margin-block-end: 0.75rem;
.mb-4margin-block-end: 1rem;
.mb-5margin-block-end: 1.25rem;
.mb-6margin-block-end: 1.5rem;
.mb-7margin-block-end: 2rem;
.mb-8margin-block-end: 2.5rem;
.mb-9margin-block-end: 3rem;
.mb-automargin-block-end: auto;
.ms-0margin-inline-start: 0;
.ms-1margin-inline-start: 0.25rem;
.ms-2margin-inline-start: 0.5rem;
.ms-3margin-inline-start: 0.75rem;
.ms-4margin-inline-start: 1rem;
.ms-5margin-inline-start: 1.25rem;
.ms-6margin-inline-start: 1.5rem;
.ms-7margin-inline-start: 2rem;
.ms-8margin-inline-start: 2.5rem;
.ms-9margin-inline-start: 3rem;
.ms--1margin-inline-start: -0.25rem;
.ms--2margin-inline-start: -0.5rem;
.ms-automargin-inline-start: auto;

Overview

Use margin utilities to control the outer space around elements. Margin utilities are built from a default Sass map ranging from 0 to 3rem (.m-0 through .m-9). Use utilities like .m-3 and .m-5 to control the margin on all sides of an element:

.m-3
.m-5
HTML
<div class="m-3">.m-3</div>
<div class="m-5">.m-5</div>

Using flexbox or CSS Grid? Consider using the gap utility instead.

Notation

Margin utilities that apply to all breakpoints, from xs to 2xl, have no breakpoint prefix 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 prefix.

The classes are named using the format {property}{sides}-{size} for xs and {breakpoint}:{property}{sides}-{size} for sm, md, lg, xl, and 2xl.

Where property is:

  • m - for classes that set margin

Where sides is one of:

  • t - for classes that set margin-top
  • b - for classes that set margin-bottom
  • s - (start) for classes that set margin-left in LTR, margin-right in RTL
  • e - (end) for classes that set margin-right in LTR, margin-left in RTL
  • 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 on all 4 sides of the element

Where size is one of:

  • 0 - for classes that eliminate the margin by setting it to 0
  • 1 - (by default) for classes that set the margin to $spacer * .25
  • 2 - (by default) for classes that set the margin to $spacer * .5
  • 3 - (by default) for classes that set the margin to $spacer * .75
  • 4 - (by default) for classes that set the margin to $spacer
  • 5 - (by default) for classes that set the margin to $spacer * 1.25
  • 6 - (by default) for classes that set the margin to $spacer * 1.5
  • 7 - (by default) for classes that set the margin to $spacer * 2
  • 8 - (by default) for classes that set the margin to $spacer * 2.5
  • 9 - (by default) for classes that set the margin to $spacer * 3
  • auto - for classes that set the margin to auto

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

Examples

Single side

Use utilities like .mt-3, .me-2, .mb-4, and .ms-1 to control the margin on one side of an element:

.mt-4
.me-4
.mb-4
.ms-4
HTML
<div class="mt-4">.mt-4</div>
<div class="me-4">.me-4</div>
<div class="mb-4">.mb-4</div>
<div class="ms-4">.ms-4</div>

Horizontal margin

Use utilities like .mx-3 and .mx-5 to control the horizontal margin of an element:

.mx-3
.mx-5
HTML
<div class="mx-3">.mx-3</div>
<div class="mx-5">.mx-5</div>

Vertical margin

Use utilities like .my-3 and .my-5 to control the vertical margin of an element:

.my-3
.my-5
HTML
<div class="my-3">.my-3</div>
<div class="my-5">.my-5</div>

Horizontal centering

Bootstrap 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.

.mx-auto
HTML
<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

Negative margin

In CSS, margin properties can utilize negative values (padding cannot). In v6, negative margins are limited to margin-inline-start and margin-inline-end only, using spacers -1 (-0.25rem) and -2 (-0.5rem):

HTML
<div class="ms--1">.ms--1</div>
<div class="me--2">.me--2</div>

The v5 full negative margin utilities across all sides (like .mt-n1) have been removed.

Responsive

All margin utilities are responsive and include all breakpoints.

  • .m-0 through .m-9 and .m-auto
  • .sm:m-0 through .sm:m-9 and .sm:m-auto
  • .md:m-0 through .md:m-9 and .md:m-auto
  • .lg:m-0 through .lg:m-9 and .lg:m-auto
  • .xl:m-0 through .xl:m-9 and .xl:m-auto
  • .2xl:m-0 through .2xl:m-9 and .2xl:m-auto

CSS

Sass utilities API

Margin utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

scss/_utilities.scss
"margin": (
  responsive: true,
  property: margin,
  class: m,
  values: map.merge($spacers, (auto: auto))
),
"margin-x": (
  responsive: true,
  property: margin-inline,
  class: mx,
  values: map.merge($spacers, (auto: auto))
),
"margin-y": (
  responsive: true,
  property: margin-block,
  class: my,
  values: map.merge($spacers, (auto: auto))
),
"margin-top": (
  responsive: true,
  property: margin-block-start,
  class: mt,
  values: map.merge($spacers, (auto: auto))
),
"margin-end": (
  responsive: true,
  property: margin-inline-end,
  class: me,
  values: map-merge-multiple($spacers, $negative-spacers, (auto: auto))
),
"margin-bottom": (
  responsive: true,
  property: margin-block-end,
  class: mb,
  values: map.merge($spacers, (auto: auto))
),
"margin-start": (
  responsive: true,
  property: margin-inline-start,
  class: ms,
  values: map-merge-multiple($spacers, $negative-spacers, (auto: auto))
),