DEV Community

Daphnie Ozioma
Daphnie Ozioma

Posted on • Originally published at educative.io

How to apply padding in Bootstrap 4

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.

Discussion (0)