Margin and padding are made easy with Bootstrap. Most of your padding and margin needs can be done with these Bootstrap properties. Padding is implemented with 6 different classes, each beginning with p-. Similarly, margin classes begin with m-.

The padding classes include: p-0, p-1, p-2, p-3, p-4, and p-5. The following classes are defined for margins: m-0, m-1, m-2, m-3, m-4, and m-5. Let’s look at each of these.

<div>
    <button class="btn btn-primary p-0">Padding 0</button>
    <button class="btn btn-primary p-1">Padding 1</button>
    <button class="btn btn-primary p-2">Padding 2</button>
    <button class="btn btn-primary p-3">Padding 3</button>
    <button class="btn btn-primary p-4">Padding 4</button>
    <button class="btn btn-primary p-5">Padding 5</button>
</div>
<div>
    <button class="btn btn-primary m-0">Margin 0</button>
    <button class="btn btn-primary m-1">Margin 1</button>
    <button class="btn btn-primary m-2">Margin 2</button>
    <button class="btn btn-primary m-3">Margin 3</button>
    <button class="btn btn-primary m-4">Margin 4</button>
    <button class="btn btn-primary m-5">Margin 5</button>
</div>

Like text alignment, different margin and padding can be applied to different screen resolutions. Some examples include:

• p-sm-3
• p-md-5
• m-lg-1
• m-xl-4

Just like the inherent CSS properties, bootstrap also makes available the padding and margin direction, like padding-left, pl- followed by the size or breakpoint. Examples include:

• pl-3: left padding of 3
• pr-5: right padding of 5
• pt-2: top padding of 2
• pb-md-1: bottom padding on medium+ displays of 1
• py-4: top and bottom padding of 4
• px-0: left and right padding of 0
• etc.

Margin follows a nearly identical pattern, but instead of starting with p, you start with m, such as mb-3 (bottom margin 3).

• ml-3: left margin of 3
• mr-5: right margin of 5
• mt-2: top margin of 2
• mb-md-1: bottom margin on medium+ displays of 1
• my-4: top and bottom margin of 4
• mx-0: left and right margin of 0
• etc.