The spacing classes in Bootstrap 4

The margin property adds spacing between the elements while CSS padding between the content and container boundary.

Bootstrap 4 has built-in utility responsive classes for margin and padding that you may use easily in various elements to manage the spacing.

A few quick examples

Syntax of using shorthand margin and padding

You may use the padding and margin shorthand Bootstrap 4 classes as follows:

For extra small devices i.e. xs:


For other devices/viewports (small, medium, large and extra large):



property = m for margin and p for padding

Following are sides shorthand meanings:

  • l = defines the left-margin or left-padding
  • r = defines the right-margin or right-padding
  • t = defines the top-margin or top-padding
  • b = defines the bottom-margin or right-padding
  • x = For setting left and right padding and margins by the single call
  • y = For setting top and bottom margins
  • blank = margin and padding for all sides

The size can be from value 0 to 5 and auto. I will show you examples for seeing the difference.

The breakpoint = sm, md, lg, and xl.

Combining all the above, the left padding complete code can be (for example):

For left padding in extra small devices:


or for medium to extra large:


Now, let me show you the usage of these padding and margin shorthand utility classes in action in Bootstrap 4.

The example of Bootstrap padding classes for all directions

In this example, the padding classes are used in paragraphs as follows:

  • p-5
  • p-4
  • p-3
  • p-2
  • p-1
  • p-0

As such no breakpoint is used, so this applies to viewports from extra small to extra large. That means, if you resize the example page, the padding maintains for all viewports. Have a look:

Bootstrap padding

Online demo and code

The markup:

<div class="container">

<h3 class="p-3 text-primary">The demo of padding classes</h3>

<p class="p-5 bg-info text-warning">p-5</p>

<p class="p-4 bg-success text-warning">p-4</p>

<p class="p-3 bg-primary text-warning">p-3</p>

<p class="p-2 bg-secondary text-warning">p-2</p>

<p class="p-1 bg-danger text-white">p-1</p>

<p class="p-0 bg-primary text-warning">p-0</p>


You can see, the p-0 is adjacent to the container div element and the difference of padding in all directions for different utility classes.

Using the left and top padding classes example

In the following example, four paragraphs are given different individual padding classes. The first applies from the small devices by using pl-sm-5 class. That is, only the left padding will apply.

In the second <p> tag, the pt-md-2 and pl-md-3 classes are used. That means from medium viewports, the top padding will be two points and left padding is 3.

For the third paragraph, pt-lg-3 and pl-lg-2 class are applied. By .lg, it means from large devices/viewports. The left padding is 2 and top padding is 3.

Finally, the last paragraph is given the padding classes for extra large viewports. The classes are pt-xl-5 and pl-xl-4.

For all above paragraphs, for extra small viewports, the padding remains zero.

Bootstrap padding individual

COmplete code:

<!DOCTYPE html>
<link rel="stylesheet" href="" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="container">
<h3 class="text-primary">The demo of individual padding classes</h3>
<p class="pl-sm-5 bg-info text-warning">pl-sm-5</p>
<p class="pt-md-2 pl-md-3 bg-success text-warning">pt-md-2 pl-md-3</p>
<p class="pt-lg-3 pl-lg-2 bg-primary text-warning">pt-lg-3 pl-lg-2</p>
<p class="pt-xl-5 pl-xl-4 bg-secondary text-warning">pt-xl-5 pl-xl-4</p>



Similarly, you may use the bottom and right padding individually in different elements. For example:

Bottom padding:

  • pb-sm-5
  • pb-md-4
  • pb-lg-2

Right padding:

  • pr-sm-1
  • pr-md-3
  • etc.

A demo of using margin classes for all directions

In the same way, you may use the Bootstrap margin utility classes for adding the space between elements. Just like padding, you may use a single class for all directions or individual classes for each direction.

The following example applies padding in all directions in four paragraphs for all viewports:

Bootstrap merging all

The code:

<!DOCTYPE html>
<link rel="stylesheet" href="" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="container">
<h3 class="text-primary">The demo of margin classes</h3>
<p class="m-2 bg-info text-warning">m-2 </p>
<p class="m-4 bg-success text-warning">m-3</p>
<p class="m-1 bg-primary text-warning">m-1</p>
<p class="m-5 bg-secondary text-warning">m-5</p>



Applying margin top and bottom example

The example below shows applying different margins on top and bottom between the elements. For the top margin, following classes are used:

  • mt-sm-3
  • mt-sm-2
  • mt-sm-4

for the bottom, these classes are used:

  • mb-sm-5
  • mb-sm-4
  • mb-sm-2
  • mb-sm-1

As .sm breakpoint is used in all these classes, so it applies to small to extra large devices. Have a look:

Bootstrap margin top bottom

The HTML code:

<div class="container">

<h3 class="text-primary">The demo of margin classes</h3>

<p class="mt-sm-3 mb-sm-5 bg-info text-warning">mt-sm-1 mb-sm-5 </p>

<p class="mt-sm-2 mb-sm-4 bg-success text-warning">mt-sm-2 mb-sm-4</p>

<p class="mt-sm-4 mb-sm-2 bg-primary text-warning">mt-sm-4 mb-sm-2</p>

<p class="mt-sm-3 mb-sm-1 bg-secondary text-warning">mt-sm-3 mb-sm-1</p>


Using x and y for margins

This example shows using the x and y for the margin sides. Just to remind the ‘x’ side will set the margin for left and right whereas the ‘y’ side sets the margins for top and bottom. Use these if you require setting the same margins for respective sides. See the usage below:

Bootstrap-margin x y

The code:

<div class="container">

<h3 class="text-primary">The demo of margin classes</h3>

<p class="mx-sm-3 my-sm-5 bg-info text-warning">mx-sm-3 my-sm-5</p>

<p class="mx-sm-2 my-sm-4 bg-success text-warning">mx-sm-2 my-sm-4</p>

<p class="mx-sm-4 my-sm-2 bg-primary text-warning">mx-sm-4 my-sm-2</p>

<p class="mx-sm-3 my-sm-1 bg-secondary text-warning">mx-sm-3 my-sm-1</p>



Author - Abu Hassam

Abu Hassam is an experienced web developer. He graduated in Computer Science in 2000. Started as a software engineer and worked mostly on web-based projects.
Just like any great adventure, web development is about discovery and learning.
The web is a vast playground, and the best adventures are yet to come. Happy coding and exploring! ️