Bootstrap includes a wide range of responsive utility classes to modify an element's appearance, including padding and margin classes.

In Bootstrap 4, padding utility classes uses the following format:  
# For extra small devices
`{property}{sides}-{size}`

# For other viewports
`{property}{sides}-{breakpoint}-{size}`.

Where property is **p** for `padding` and breakpoint can be any of **sm** (small), **md**(medium), **lg**(large), or **xl**(extra large).

The **size** value can be set between the range 0 - 5, where 0 indicates no padding and 5 indicates 3rem in the default *Sass map*. 



<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <title>Bootstrap Padding Example</title>
</head>
<body>
    <h3 class="p-3">Example of containers with padding on all sides.</h3>
    <div class="text-white">
        <p class="bg-primary p-1">p-1</p>
        <p class="bg-secondary p-2">p-2</p>
        <p class="bg-danger p-3">p-3</p>
        <p class="bg-info p-4">p-4</p>
        <p class="bg-success p-5">p-5</p>
        <p class="bg-danger p-0">No padding p-0</p>        
    </div> 
</body>
</html>

codemirror

The sides can be any of the following;
* **`t`** - sets the `padding-top` property

* **`b`**- sets the `padding-bottom` property

* **`l`** - sets the `padding-left` property

* **`r`**- sets the `padding-right` property

* **`x`** - sets the padding horizontal across a container, that is both `padding-left` and `padding-right`

<p class="px-3">Padding Left and Right only</p>

* **`y`** - sets padding vertically across a container, that is both `padding-top` and `padding-bottom`

<p class="py-3">Padding top and bottom only</p>

# Implementation
The result of applying the classes mentioned above is shown below:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <h3 class="p-3">Containers with padding on specific sides</h3>
    <div class="text-white">
        <p class="bg-primary pt-3">Padding top</p>
        <p class="bg-danger pb-3">Padding bottom</p>
        <p class="bg-primary pl-3">Padding left</p>
        <p class="bg-info pr-3">Padding right</p>
       <p class="bg-success px-3">Padding Left and Right only</p>
       <p class="bg-primary py-3">Padding top and bottom only</p>
    </div>
    
</body>
</html>

How to apply padding in Bootstrap 4

For extra small devices

For other viewports

Implementation