a shot of dev knowledge

RELATED TAGS

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 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.

Containers with padding on all sides.

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:

Code Output

RELATED TAGS

RELATED COURSES

View all Courses

Keep Exploring