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?
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.
|m||for setting margin|
|p||for setting padding|
|x||for both left and right|
|y||for both top and bottom|
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
<div class="pt-5">Hey! Welcome to CSEStack</div>
Example 2: Add Margin
Let’s say you want to add margin-bottom to your div, use class
<div class="mb-2">Hey! Welcome to CSEStack</div>
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.