Bootstrap 4 Margin


Basic Margin

CSS margin properties are used to create space around elements outside of a defined boundary. There are many margin classes in bootstrap that we can use to create responsive websites.

Without margin
With margin

Example Code

<div class="bg-primary text-white">Without margin</div>
<div class="m-5 bg-primary text-white">With margin</div>

All Margin Classes

The margin classes are-

  1. .m-0 class sets margin to 0.
  2. .m-1 class sets margin to .25rem (4px) while font size 16px.
  3. .m-2 class sets margin to .5rem (8px) while font size 16px.
  4. .m-3 class sets margin to 1rem (16px) while font size 16px.
  5. .m-4 class sets margin to 1.5rem (24px) while font size 16px.
  6. .m-5 class sets margin to 3rem (48px) while font size 16px.
m-0
m-1
m-2
m-3
m-4
m-5

Example Code

<div class="bg-primary text-white m-0">m-0</div>
<div class="m-1 bg-primary text-white">m-1</div>
<div class="m-2 bg-primary text-white">m-2</div>
<div class="m-3 bg-primary text-white">m-3</div>
<div class="m-4 bg-primary text-white">m-4</div>
<div class="m-5 bg-primary text-white">m-5</div>

Bootstrap Margin Top

Only .mt- * classes are required to provide margin on top of the content.

mt-0
mt-1
mt-2
mt-3
mt-4
mt-5
<div class="bg-primary text-white mt-0">mt-0</div>
<div class="mt-1 bg-primary text-white">mt-1</div>
<div class="mt-2 bg-primary text-white">mt-2</div>
<div class="mt-3 bg-primary text-white">mt-3</div>
<div class="mt-4 bg-primary text-white">mt-4</div>
<div class="mt-5 bg-primary text-white">mt-5</div>

Bootstrap Margin Bottom

Only .mb- * classes are required to provide margin on bottom of the content.

mb-0
mb-1
mb-2
mb-3
mb-4
mb-5
<div class="bg-primary text-white mb-0">mb-0</div>
<div class="mb-1 bg-primary text-white">mb-1</div>
<div class="mb-2 bg-primary text-white">mb-2</div>
<div class="mb-3 bg-primary text-white">mb-3</div>
<div class="mb-4 bg-primary text-white">mb-4</div>
<div class="mb-5 bg-primary text-white">mb-5</div>

Bootstrap Margin Top and Bottom

Only .my-* classes need to be inserted to provide margin on the top and bottom side of the content.

my-0
my-1
my-2
my-3
my-4
my-5
<div class="my-0 bg-primary text-white">my-0</div>
<div class="my-1 bg-primary text-white">my-1</div>
<div class="my-2 bg-primary text-white">my-2</div>
<div class="my-3 bg-primary text-white">my-3</div>
<div class="my-4 bg-primary text-white">my-4</div>
<div class="my-5 bg-primary text-white">my-5</div>

Bootstrap Margin Left

Only .ml- * classes are required to provide margin on left of the content.

ml-0
ml-1
ml-2
ml-3
ml-4
ml-5
<div class="ml-0 bg-primary text-white">ml-0</div>
<div class="ml-1 bg-primary text-white">ml-1</div>
<div class="ml-2 bg-primary text-white">ml-2</div>
<div class="ml-3 bg-primary text-white">ml-3</div>
<div class="ml-4 bg-primary text-white">ml-4</div>
<div class="ml-5 bg-primary text-white">ml-5</div>

Bootstrap Margin Right

Only .mr- * classes are required to provide margin on right of the content.

mr-0
mr-1
mr-2
mr-3
mr-4
mr-5
<div class="mr-0 bg-primary text-white">mr-0</div>
<div class="mr-1 bg-primary text-white">mr-1</div>
<div class="mr-2 bg-primary text-white">mr-2</div>
<div class="mr-3 bg-primary text-white">mr-3</div>
<div class="mr-4 bg-primary text-white">mr-4</div>
<div class="mr-5 bg-primary text-white">mr-5</div>

Margin Negative

Note: Margin may be negative but padding will never be negative.

The margin classes are-

  1. .m-n1 class sets margin to -.25rem (4px) while font size 16px.
  2. .m-n2 class sets margin to -.5rem (8px) while font size 16px.
  3. .m-n3 class sets margin to -1rem (16px) while font size 16px.
  4. .m-n4 class sets margin to -1.5rem (24px) while font size 16px.
  5. .m-n5 class sets margin to -3rem (48px) while font size 16px.
<div class="m-n1 bg-primary text-white">m-n1</div>
<div class="m-n2 bg-primary text-white">m-n2</div>
<div class="m-n3 bg-primary text-white">m-n3</div>
<div class="m-n4 bg-primary text-white">m-n4</div>
<div class="m-n5 bg-primary text-white">m-n5</div>

Responsive Margin

Bootstrap margin classes are more used for their responsiveness. Margin We can change the classes according to the screen size.

Extra Large Screen(>=1200px)

The following example shows only changes to the xl screen.

m-xl-1
m-xl-2
m-xl-3
m-xl-4
m-xl-5
<div class="m-xl-1 bg-primary text-white">m-xl-1</div>
<div class="m-xl-2 bg-primary text-white">m-xl-2</div>
<div class="m-xl-3 bg-primary text-white">m-xl-3</div>
<div class="m-xl-4 bg-primary text-white">m-xl-4</div>
<div class="m-xl-5 bg-primary text-white">m-xl-5</div>

Large Screen(>=992px)

In the following example, only lg screen or more screen size changes can be seen.

m-lg-1
m-lg-2
m-lg-3
m-lg-4
m-lg-5
<div class="m-lg-1 bg-primary text-white">m-lg-1</div>
<div class="m-lg-2 bg-primary text-white">m-lg-2</div>
<div class="m-lg-3 bg-primary text-white">m-lg-3</div>
<div class="m-lg-4 bg-primary text-white">m-lg-4</div>
<div class="m-lg-5 bg-primary text-white">m-lg-5</div>

Medium Screen(>=768px)

In the following example, only md screen or more screen size changes can be seen.

m-md-1
m-md-2
m-md-3
m-md-4
m-md-5
<div class="m-md-1 bg-primary text-white">m-md-1</div>
<div class="m-md-2 bg-primary text-white">m-md-2</div>
<div class="m-md-3 bg-primary text-white">m-md-3</div>
<div class="m-md-4 bg-primary text-white">m-md-4</div>
<div class=

Small Screen(>=576px)

In the following example, only sm screen or more screen size changes can be seen.

m-sm-1
m-sm-2
m-sm-3
m-sm-4
m-sm-5
<div class="m-sm-1 bg-primary text-white">m-sm-1</div>
<div class="m-sm-2 bg-primary text-white">m-sm-2</div>
<div class="m-sm-3 bg-primary text-white">m-sm-3</div>
<div class="m-sm-4 bg-primary text-white">m-sm-4</div>
<div class="m-sm-5 bg-primary text-white">m-sm-5</div>

Margin Auto

Margin Auto
<h5 class="m-auto py-3">Margin Auto</h5>