Bootstrap 5 Spacing and Sizing

How it works

Spacing utilities combine a property, side and scale step. p sets padding, m sets margin, and logical start/end forms support direction-aware designs. The default scale is not a pixel counter: step four is 1.5rem and step five is 3rem. Use a coherent rhythm rather than accumulating unrelated margins. Sizing utilities such as w-100 describe a percentage of the containing block; they are not a viewport-width guarantee. A maximum width can keep a small form or notice readable.

Run and inspect

Save the complete document as index.html in a separate lab folder. Place Bootstrap 5.3.8 CSS beside it. Open the file in a normal browser. A separate local static server is optional; no database or PHP execution is required. Keep the Bootstrap licence with redistributed assets.

Download this complete HTML source.

Try in playground

The preview injects local Bootstrap CSS when you select Run code. It blocks external resources and actual form submission; nothing runs on import. Bootstrap plugin scripts are not loaded there.

Example

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 5 Use a Small Spacing Scale Consistently</title>
  <link rel="stylesheet" href="bootstrap.min.css">
  <style>
.notice { max-width: 34rem; }
  </style>
</head>
<body>
<main class="container py-4">
  <h1 class="h3 mb-4">Repair day</h1>
<section class="border rounded p-4 mx-auto notice"><h2 class="h5 mb-3">Before you arrive</h2><p class="mb-0">Clean the item and bring any loose pieces.</p></section>
</main>
</body>
</html>

Expected result

A centred notice has a bounded width, internal padding and one clear gap below its heading.

mx-auto centres the block because it has spare horizontal space and a bounded width. The final paragraph margin is removed intentionally. The custom notice class is scoped to this lab rather than changing Bootstrap’s container globally. Test with larger text; fixed heights are often less robust than content-driven height.