DEV Community

Daphnie Ozioma
Daphnie Ozioma

Posted on • Originally published at educative.io

How to apply padding in Bootstrap 4

#css #html #tutorial #codenewbie

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 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>
Enter fullscreen mode Exit fullscreen mode

The sides can be any of the following;

t - sets the padding-top property.

<p class=" pt-3">Padding Top</p>
Enter fullscreen mode Exit fullscreen mode

b- sets the padding-bottom property

 <p class="pb-3">Padding bottom</p>
Enter fullscreen mode Exit fullscreen mode

l - sets the padding-left property

 <p class="pl-3">Padding left</p>
Enter fullscreen mode Exit fullscreen mode

r- sets the padding-right property

<p class="pr-3">Padding Right</p>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Alt Text

This article was originally published for Edpresso.

Top comments (0)