How to use p-3 in bootstrap

BootstrapHow-ToBeginner · 3 min read

How to Use p-3 Padding Class in Bootstrap

In Bootstrap, p-3 is a utility class that adds padding of 1rem (16px) on all sides of an element. You simply add p-3 to your element's class attribute to apply this padding quickly without writing custom CSS.

📐

Syntax

The p-3 class is part of Bootstrap's spacing utilities. It uses the pattern p-{size}, where p stands for padding on all sides, and 3 is the size scale representing 1rem (16px) padding.

Here’s what each part means:

p: padding on all four sides (top, right, bottom, left)
3: size scale from 0 to 5, where 3 equals 1rem (16px)

html

<div class="p-3">Content with padding</div>

Output

A box with text 'Content with padding' and padding of 1rem on all sides

💻

Example

This example shows how to use p-3 to add padding around a text box. The padding creates space inside the box, making the content not touch the edges.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap p-3 Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="border p-3">
    This box has padding added by the <code>p-3</code> class.
  </div>
</body>
</html>

Output

A rectangular box with a border and text inside, spaced away from edges by 1rem padding

⚠️

Common Pitfalls

Some common mistakes when using p-3 include:

Forgetting to include Bootstrap CSS, so the class has no effect.
Using p-3 on inline elements like <span>, which do not respect padding well.
Confusing p-3 (padding on all sides) with directional padding classes like pt-3 (padding-top only).

html

<!-- Wrong: No Bootstrap CSS linked, so p-3 does nothing -->
<div class="p-3">No padding visible</div>

<!-- Right: Include Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="p-3">Padding visible</div>

Output

First div has no padding visible, second div has padding visible

📊

Quick Reference

Class	Description	Padding Size
p-0	No padding on all sides	0
p-1	Small padding on all sides	0.25rem (4px)
p-2	Medium-small padding on all sides	0.5rem (8px)
p-3	Medium padding on all sides	1rem (16px)
p-4	Large padding on all sides	1.5rem (24px)
p-5	Extra large padding on all sides	3rem (48px)

✅

Key Takeaways

Use p-3 to add 1rem padding on all sides of an element in Bootstrap.

Make sure Bootstrap CSS is included for p-3 to work.

Avoid using p-3 on inline elements that don't support padding well.

Remember p-3 applies padding on all sides; use directional classes for specific sides.

Bootstrap spacing classes range from 0 to 5, with 3 being a medium padding size.