Padding classes - Bootstrap

Demo

For the best viewing experience, click the Edit on CodePen button in the top righthand corner of the Pen to open it in a new tab.

<p class="p-1 px-2 py-3 pt-4 pb-md-5">Example paragraph.</p>

Bootstrap provides padding utility classes that allow you to quickly add different amounts of padding to your elements.

To apply padding to all 4 sides of an element, use the letter p with a dash and any number from 0 to 5:

<p class="p-5">Example paragraph.</p>

To target only the left and right sides of an element, use px instead of p with any number from 0 to 5:

<p class="px-5">Example paragraph.</p>

To target the top and bottom of an element, use py with any number from 0 to 5:

<p class="py-5">Example paragraph.</p>

To target only the top, bottom, left, or right side, use pt, pb, pl, or pr respectively with any number from 0 to 5:

<p class="pt-5">Example paragraph.</p>

To make any of the above classes responsive, add in the sm, md, lg, or xl breakpoints in the middle:

<p class="pt-md-5">Example paragraph.</p>

Recreate the HTML code from the Demo section in your index.html file.

Try changing the number on the end of the class. You can use the numbers 0 through 5.

Try targeting diffferent sides by replacing the letter t with the letters b, l, r, x, and y.

Try targeting different breakpoints by replacing the letters md with sm, lg, or xl. Try resizing the window to test the responsive classes.

Spacing from the Bootstrap Docs