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.
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.
| Property | |
| m | for setting margin |
| p | for setting padding |
| Direction | |
| t | for top |
| b | for bottom |
| l | for left |
| r | for right |
| x | for both left and right |
| y | for both top and bottom |
| Value | |
| 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:
<property><direction>-<value>
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>
Here,
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>
Here,
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.
I am adequate in prominent skills like HTML, CSS, Javascript and React, different web hosting sectors, Graphic Designing, and so on. Taking web development as a profession not only fulfills my pocket but also my heart. It has been my passion since my early teens and also I never give up and constantly learn new skills and gather more knowledge to be a better version of myself.
