Notes:

Bootstrap (Spacing)- Margin & Padding related classes:
Margin indicates the space around an element
Padding indicates the space around the content of an element

Basic Syntax:
{property} [ side - device ] {- size}

where:
property: p or m
p: indicates padding
m: indicates margin

side: t, l, r, b, x, or y
t - top
l - left
r - right
b- bottom
x - left and right
y - top and bottom
Note: if you do not specify the side then it indicates all sides

device : sm, md, lg, or xl
sm : in small screen device and above
md: in medium screen device and above
lg : in large screen device and above
xl : in extra large screen device and above
Note: if you do not specify the device then it indicates in any screen size device

size: 0, 1, 2, 3, 4, or 5
0 : $spacer * 0 = 16px * 0 = 0px
1 : $spacer * 0.25 = 16px * 0.25 = 4px
2 : $spacer * 0.50 = 16px * 0.50 = 8px
3 : $spacer * 1 = 16px * 1 = 16px
4 : $spacer * 1.5 = 16px * 1.5 = 24px
5 : $spacer * 2 = 16px * 2 = 32px
auto: used only with margin

Example code: Padding
<div style="border:1px solid black;" class="p-0"> Some Text </div>
<div style="border:1px solid black;" class="p-1"> Some Text </div>
<div style="border:1px solid black;" class="p-2"> Some Text </div>
<div style="border:1px solid black;" class="p-3"> Some Text </div>
<div style="border:1px solid black;" class="p-4"> Some Text </div>
<div style="border:1px solid black;" class="p-5"> Some Text </div>
<div style="border:1px solid black; padding:5rem;"> Some Text </div>

<div style="border:1px solid black;" class="pl-3"> Some Text </div>
<div style="border:1px solid black;" class="pt-3"> Some Text </div>
<div style="border:1px solid black;" class="pr-3"> Some Text </div>
<div style="border:1px solid black;" class="pb-3"> Some Text </div>
<div style="border:1px solid black;" class="px-3"> Some Text </div>
<div style="border:1px solid black;" class="py-3"> Some Text </div>
<div style="border:1px solid black;" class="p-sm-3 p-md-4 p-lg-5"> Some Text </div>

Example code: Margin
<div style="border:1px solid black;" class="m-0"> Some Text </div>
<div style="border:1px solid black;" class="m-1"> Some Text </div>
<div style="border:1px solid black;" class="m-2"> Some Text </div>
<div style="border:1px solid black;" class="m-3"> Some Text </div>
<div style="border:1px solid black;" class="m-4"> Some Text </div>
<div style="border:1px solid black;" class="m-5"> Some Text </div>
<div style="border:1px solid black; margin:5rem;"> Some Text </div>

<div style="border:1px solid black;" class="ml-3"> Some Text </div>
<div style="border:1px solid black;" class="mt-3"> Some Text </div>
<div style="border:1px solid black;" class="mr-3"> Some Text </div>
<div style="border:1px solid black;" class="mb-3"> Some Text </div>
<div style="border:1px solid black;" class="mx-3"> Some Text </div>
<div style="border:1px solid black;" class="my-3"> Some Text </div>
<div style="border:1px solid black;" class="w-75 mx-auto"> Some Text </div>

<div style="border:1px solid black;" class="m-sm-3 m-md-4 m-lg-5"> Some Text </div>

Interview Questions: