Padding utilities
Padding utilities add space inside an element between its border and its content.
In this page:
Syntax
<div class="p-3 pt-2 px-4 py-5">...</div>
<!-- p{side}-{size}: side = t, b, s, e, x, y; size = 0-5 -->Padding utilities
Padding uses the same pattern as margins with the letter p: p-3, pt-2, px-4, py-5. Sizes run 0 to 5. Padding is inside the element's background, so coloured boxes grow as padding increases. Use gap utilities for space between flex and grid children.
Note:
Padding adds to an element's box size unless box-sizing is border-box, which Bootstrap sets.
Example: Padding utilities
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<div class="container">
<div class="bg-primary text-white p-0 mb-2">p-0</div>
<div class="bg-primary text-white p-2 mb-2">p-2</div>
<div class="bg-primary text-white px-5 py-1 mb-2">px-5 py-1</div>
<div class="bg-primary text-white p-5">p-5</div>
</div>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Confusing margin and padding
- Using padding to space siblings instead of gap
- Forgetting sides
Chapter Summary
- p{side}-{size}
- Padding sits inside the box
- Background covers padding
- Same sides and sizes as margins
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: