Skip to content

Try our new Crash Courses!

Buy one of our new Crash Courses, now hosted on Podia.

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.

Summary

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

Details

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>

Exercises

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

References

Spacing from the Bootstrap Docs

Back to: Bootstrap Reference > Bootstrap Utility Classes