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>
The sides can be any of the following;
t - sets the padding-top property.
<p class=" pt-3">Padding Top</p>
b- sets the padding-bottom property
<p class="pb-3">Padding bottom</p>
l - sets the padding-left property
<p class="pl-3">Padding left</p>
r- sets the padding-right property
<p class="pr-3">Padding Right</p>
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>
This article was originally published for Edpresso.
Latest comments (0)