How to add Margin and Padding in Bootstrap?

Shape Image One

How to add Margin and Padding in Bootstrap?

Nowadays Bootstrap plays a major role in web development. If you are font-end or web developer knowing bootstrap will be useful.

Bootstrap is high in demand. Almost all the websites use the boostrap for styling the content in the presentation layer (UI).

What is bootstrap?

Bootstrap is the most popular HTML, CSS, Javascript Library. It is majorly used for creating fast and responsive designs. So it plays important role in web developer life.

In this tutorial, we are going to learn about adding margin and padding using boostrap for alignment.

How to add Margin and Padding in Bootstrap?

Basically, there are two main properties in HTML for adjusting the proper spacing and alignment between HTML elements i.e. margin and padding. Padding is usally used for the block indentations.

To use the margin and padding, bootstrap has special classes defined for it. You don’t need to write any CSS code. Simply, use the class name for margin and padding.

This makes development pretty faster. Isn’t it?

For spacing, there are different properties like margin and padding; there are different directions; and different values. With all these combinations you can use different class names. These class names are already defined in bootstrap libraries.

You don’t need to remember the classes. I will tell you how you can find the proper class name.

Just get familiar with the abbreviations.

m for setting margin
p for setting padding
t for top
b for bottom
l for left
r for right
x for both left and right
y for both top and bottom
0 0 rem
1 0.25 rem
2 0.5 rem
3 1 rem
4 1.5 rem
5 3 rem

With this shortcodes you can get the class name to set the padding and margin for proper styling and alignement.

Syntax for bootsrap class name:


Let’s take some examples.

Example 1: Add Padding

Let’s say you want to add padding-top to your div. Use class pt-5.

<div class="pt-5">Hey! Welcome to CSEStack</div>


  • p is for padding property
  • t is for top direction
  • 5 is for value

Example 2: Add Margin

Let’s say you want to add margin-bottom to your div, use class mb-2.

<div class="mb-2">Hey! Welcome to CSEStack</div>


  • m is for margin property
  • b is for bottom direction
  • 2 is for value

Similarly you can set the margin-top, margin-bottom, margin-left, margin-right, padding-top, padding-bottom, padding-left and padding-right using bootstrap class. It is pretty easy to add margin and padding in bootstrap, isn’t it?

Any doubt? Let me know in the comment.

Leave a Reply

Your email address will not be published. Required fields are marked *