How to apply padding in Bootstrap 4
Tags: css, html, tutorial, codenewbie
Published: 2021-05-01 18:22:11

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 use 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
<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>
```

The sides can be any of the following;

**`t`** - sets the `padding-top` property.

```HTML
<p class=" pt-3">Padding Top</p>
```

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

```HTML
 <p class="pb-3">Padding bottom</p>
```

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

```HTML
 <p class="pl-3">Padding left</p>
```
**`r`**- sets the `padding-right` property
```HTML
<p class="pr-3">Padding Right</p>
```
**`x`** - sets the padding horizontal across a container, that is both `padding-left` and `padding-right`
```HTML
<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`
```HTML
<p class="py-3">Padding top and bottom only</p>
```

## Implementation
The result of applying the classes mentioned above is shown below:
```HTML
<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>
```


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8u9kr2f2rs5pt28gczgd.png)


This article was originally published for [Edpresso](https://www.educative.io/edpresso/how-to-apply-padding-in-bootstrap-4).