Bootstrap 5 Tutorial

v5.3.0

Bootstrap 5 Tutorial

Spacing Utilities in Bootstrap 5

Spacing Utilities: Quickly add margin and padding to elements with consistent spacing scale.

Spacing Scale

Default Spacing Scale

Size	Class Suffix	rem	px	Use Case	Example
0	`-0`	0	0px	Reset spacing	`.m-0`
1	`-1`	0.25rem	4px	Tight spacing	`.m-1`
2	`-2`	0.5rem	8px	Small spacing	`.m-2`
3	`-3`	1rem	16px	Default spacing	`.m-3`
4	`-4`	1.5rem	24px	Medium spacing	`.m-4`
5	`-5`	3rem	48px	Large spacing	`.m-5`
Auto	`-auto`	auto	auto	Automatic spacing	`.mx-auto`

Note: Bootstrap 5 also includes size 6 (4rem/64px) and custom sizes can be added via SCSS variables.

Margin Utilities

Margin Classes

All Sides

.m-3 (margin: 1rem)

Top Margin

.mt-3 (margin-top)

Right Margin

.me-3 (margin-right)

Bottom Margin

.mb-3 (margin-bottom)

Horizontal Margin

.mx-3 (left & right)

Vertical Margin

.my-3 (top & bottom)

Auto Margin

.mx-auto (horizontal center)

<!-- Margin All Sides -->
<div class="m-1">margin: 0.25rem</div>
<div class="m-2">margin: 0.5rem</div>
<div class="m-3">margin: 1rem</div>
<div class="m-4">margin: 1.5rem</div>
<div class="m-5">margin: 3rem</div>

<!-- Individual Sides -->
<div class="mt-3">margin-top: 1rem</div>
<div class="mb-3">margin-bottom: 1rem</div>
<div class="ms-3">margin-left: 1rem</div>
<div class="me-3">margin-right: 1rem</div>

<!-- Horizontal & Vertical -->
<div class="mx-3">margin-left & margin-right: 1rem</div>
<div class="my-3">margin-top & margin-bottom: 1rem</div>

<!-- Auto Margin -->
<div class="mx-auto">horizontal auto margin</div>
<div class="ms-auto">left auto margin</div>
<div class="me-auto">right auto margin</div>

Padding Utilities

Padding Classes

All Sides Padding

.p-3 (padding: 1rem)

Top Padding

.pt-3 (padding-top)

Horizontal Padding

.px-3 (left & right)

Vertical Padding

.py-3 (top & bottom)

Right Padding

.pe-3 (padding-right)

Bottom Padding

.pb-3 (padding-bottom)

<!-- Padding All Sides -->
<div class="p-1">padding: 0.25rem</div>
<div class="p-2">padding: 0.5rem</div>
<div class="p-3">padding: 1rem</div>
<div class="p-4">padding: 1.5rem</div>
<div class="p-5">padding: 3rem</div>

<!-- Individual Sides -->
<div class="pt-3">padding-top: 1rem</div>
<div class="pb-3">padding-bottom: 1rem</div>
<div class="ps-3">padding-left: 1rem</div>
<div class="pe-3">padding-right: 1rem</div>

<!-- Horizontal & Vertical -->
<div class="px-3">padding-left & padding-right: 1rem</div>
<div class="py-3">padding-top & padding-bottom: 1rem</div>

<!-- Combined Padding -->
<div class="p-3 px-md-5 py-lg-4">
  Responsive padding example
</div>

Negative Margin

Negative Spacing Utilities

Negative Margin Examples

Regular element

.mt-n3 (negative top margin)

Overlap Effect

Background element

.mt-n5 overlapped card

Note: Negative margins are available from -1 to -5 (e.g., .mt-n1 to .mt-n5).

<!-- Negative Margins -->
<div class="mt-n1">margin-top: -0.25rem</div>
<div class="mt-n2">margin-top: -0.5rem</div>
<div class="mt-n3">margin-top: -1rem</div>
<div class="mt-n4">margin-top: -1.5rem</div>
<div class="mt-n5">margin-top: -3rem</div>

<!-- All sides negative -->
<div class="m-n3">margin: -1rem</div>
<div class="mx-n3">margin-left & margin-right: -1rem</div>
<div class="my-n3">margin-top & margin-bottom: -1rem</div>

<!-- Practical example -->
<div class="card">
  <div class="card-body">
    <div class="bg-primary text-white p-3 mt-n5">
      Overlapping element
    </div>
  </div>
</div>

Gap Utilities

Gap for Flex and Grid

Flex Gap

Item 1

Item 2

Item 3

.gap-3

Grid Gap

Column 1

Column 2

Column 3

.gap-3 on row

Column Gap Only

Item A

Item B

Item C

.column-gap-4

<!-- Flex Gap -->
<div class="d-flex gap-1">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<div class="d-flex gap-2">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<div class="d-flex gap-3">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Grid Gap -->
<div class="row gap-3">
  <div class="col">Column 1</div>
  <div class="col">Column 2</div>
</div>

<!-- Column & Row Gaps -->
<div class="d-flex column-gap-3 row-gap-2 flex-wrap">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

Responsive Spacing

Responsive Margin Examples

.mt-2 .mt-md-4 .mt-lg-5

.mx-2 .mx-sm-3 .mx-md-4 .mx-lg-5

Responsive Padding Examples

.p-2 .p-md-3 .p-lg-4

.px-1 .px-sm-2 .px-md-3 .px-lg-4

<!-- Responsive Margin -->
<div class="mt-2 mt-md-4 mt-lg-5">
  Small top margin on mobile, medium on tablet, large on desktop
</div>

<div class="mb-3 mb-sm-4 mb-md-5">
  Responsive bottom margin
</div>

<div class="mx-2 mx-md-4 mx-lg-auto">
  Responsive horizontal margin with auto on large screens
</div>

<!-- Responsive Padding -->
<div class="p-2 p-md-3 p-lg-4">
  Responsive padding on all sides
</div>

<div class="px-3 px-md-4 px-lg-5 py-2 py-md-3">
  Different padding for x and y axes
</div>

<!-- Hide/show with spacing -->
<div class="d-none d-md-block mt-4">
  Hidden on mobile, visible with margin on tablet+
</div>

Practical Examples

Card Layout

Product Card

In StockSale

Premium Headphones

High-quality wireless headphones with noise cancellation.

$299.99

Free shipping • 30-day returns

<div class="card shadow-sm">
  <div class="card-header bg-light">
    <h5 class="card-title mb-0">Title</h5>
  </div>
  <div class="card-body p-4">
    <div class="mb-3">
      <span class="badge bg-success me-2">Badge 1</span>
      <span class="badge bg-warning">Badge 2</span>
    </div>
    <h4 class="card-title mb-3">Product Name</h4>
    <p class="card-text text-muted mb-4">
      Description text
    </p>
    <div class="d-flex justify-content-between align-items-center">
      <span class="h4 text-primary mb-0">Price</span>
      <button class="btn btn-primary px-4">Button</button>
    </div>
  </div>
  <div class="card-footer bg-light py-3">
    <small class="text-muted">Footer text</small>
  </div>
</div>

Navigation Bar

💡

Spacing Tips

Consistent spacing creates visual harmony and improves readability.

<!-- Navigation spacing -->
<nav class="navbar p-3">
  <a class="navbar-brand me-4">Brand</a>
  <div class="navbar-nav me-auto">
    <a class="nav-link active me-3">Home</a>
    <a class="nav-link me-3">Features</a>
  </div>
  <div class="d-flex">
    <button class="btn btn-outline-primary me-2">Login</button>
    <button class="btn btn-primary">Sign Up</button>
  </div>
</nav>

<!-- Alert with spacing -->
<div class="alert alert-info p-3">
  <div class="d-flex align-items-center">
    <div class="flex-shrink-0 me-3">
      Icon
    </div>
    <div class="flex-grow-1">
      <h6 class="alert-heading mb-2">Title</h6>
      <p class="mb-0">Content</p>
    </div>
  </div>
</div>

Customizing Spacing Scale

SCSS Customization

// Customize base spacer
$spacer: 1rem;

// Extend spacing scale
$spacers: (
  0: 0,
  1: $spacer * .25,    // 4px
  2: $spacer * .5,     // 8px
  3: $spacer,          // 16px
  4: $spacer * 1.5,    // 24px
  5: $spacer * 3,      // 48px
  6: $spacer * 4,      // 64px
  7: $spacer * 5,      // 80px
  8: $spacer * 6,      // 96px
  9: $spacer * 7,      // 112px
  10: $spacer * 8      // 128px
);

// Add custom spacers
$custom-spacers: (
  "xs": $spacer * .125,  // 2px
  "sm": $spacer * .375,  // 6px
  "lg": $spacer * 2,     // 32px
  "xl": $spacer * 2.5    // 40px
);

// Merge with default spacers
$spacers: map-merge($spacers, $custom-spacers);

// Custom negative margins
$negative-spacers: negativify-map($spacers);

// Import Bootstrap
@import "bootstrap/scss/bootstrap";

Tip: After customizing, you can use classes like .m-xs, .p-xl, etc.

Best Practices

Spacing Guidelines

✅ Use consistent spacing scale throughout the project
✅ Prefer margin over padding for spacing between elements
✅ Use padding for internal spacing within elements
✅ Utilize responsive spacing for different screen sizes
✅ Combine auto margins for centering elements
✅ Use gap utilities for consistent spacing in flex/grid layouts
✅ Document your spacing scale for team consistency

NextIntroduction

→

Bootstrap 5 Tutorial

Bootstrap Basics

Layout System

Typography

Colors & Backgrounds

Images & Media

Tables

Forms

Buttons

Components

Utilities

Advanced Topics

Real-World Projects

Bootstrap 5 Tutorial