Bootstrap Spacing Calculator

The Bootstrap Spacing Calculator generates precise Bootstrap 5 utility classes for margin and padding across all breakpoints, sides, and spacing scales. Enter your layout requirements and instantly get copy-paste-ready HTML with the exact classes you need — no guesswork, no docs-diving. Built for frontend developers and designers who work with Bootstrap 5 daily.

Configuration

Content

Element Label / Content

Supporting Text

Layout

Element Type

Preview Container Width

Additional Utility Classes

Spacing

Spacing Property

Spacing Side

Spacing Scale

Breakpoint

Design

Accent / Brand Color

Text Color

Background Color

Border Radius (px)

Show Generated Class Badge

How to Use

1. Configure the element type, spacing property (margin or padding), and which sides to apply spacing to. 2. Adjust the spacing scale (0–5 or auto), breakpoint, and choose an accent color and border-radius for the preview element. 3. Preview the rendered Bootstrap 5 component with your spacing applied in real time. 4. Copy the generated HTML snippet directly into your project — no dependencies required.

Why Use This Tool?

Memorizing Bootstrap's spacing nomenclature (m, p, t, b, s, e, x, y, auto, breakpoint prefixes) across all combinations wastes time and causes subtle layout bugs. This calculator eliminates that friction by letting you visually configure spacing and instantly see the correct class string — saving 5–10 minutes per component and reducing trial-and-error commits. It runs entirely in the browser with no signup, no installs, and no third-party dependencies.

Frequently Asked Questions

What is the Bootstrap Spacing Calculator?

It's a free browser-based tool that generates accurate Bootstrap 5 margin and padding utility classes based on your selected element type, spacing side, scale value, and breakpoint — outputting ready-to-use HTML instantly.

What does the spacing scale (0–5) map to in actual pixels?

Bootstrap's default spacing scale uses a base of 1rem (16px). Scale 1 = 0.25rem (4px), 2 = 0.5rem (8px), 3 = 1rem (16px), 4 = 1.5rem (24px), 5 = 3rem (48px), and 0 removes spacing entirely. These values come from Bootstrap's \$spacer variable and can be overridden in a custom Sass build, but the class names remain the same.

Is it free?

Yes — the Bootstrap Spacing Calculator is completely free with no signup required. Built by the CanvasBuilder.co team.