0
0
Bootsrapmarkup~5 mins

Gutters and spacing control in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Gutters and spacing help keep content neat and easy to read by adding space between elements.

When you want space between columns in a grid layout.
When you want to add padding or margin around buttons or text.
When you want to control space on different screen sizes for better look.
When you want to avoid elements sticking too close together.
When you want consistent spacing across your webpage.
Syntax
Bootsrap
class="g-{size}" for gutters (e.g., g-3)
class="p-{size}" for padding (e.g., p-2)
class="m-{size}" for margin (e.g., m-4)

Sizes range from 0 to 5, where 0 means no space and 5 means larger space.

Gutters control space between columns inside a .row.

Padding and margin classes add space inside or outside elements.

Examples
Adds medium space between columns using gutter size 3.
Bootsrap
<div class="row g-3">
  <div class="col">Column 1</div>
  <div class="col">Column 2</div>
</div>
Adds large padding inside the button for bigger clickable area.
Bootsrap
<button class="btn btn-primary p-4">Big Padding</button>
Adds small margin outside the paragraph to separate it from others.
Bootsrap
<p class="m-2">Paragraph with margin</p>
Removes all space between columns by setting gutter to 0.
Bootsrap
<div class="row g-0">
  <div class="col">No gutter space</div>
  <div class="col">No gutter space</div>
</div>
Sample Program

This page shows three columns with space between them using gutters. Each column has padding inside for spacing. The button below also has padding to make it bigger. The paragraph has margin top and bottom removed for tight spacing.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Gutters and Spacing</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <main class="container mt-4">
    <h1 class="mb-4">Gutters and Spacing Example</h1>
    <div class="row g-4">
      <div class="col bg-primary text-white p-3">Column 1 with padding</div>
      <div class="col bg-secondary text-white p-3">Column 2 with padding</div>
      <div class="col bg-success text-white p-3">Column 3 with padding</div>
    </div>
    <button class="btn btn-danger mt-4 p-3">Button with padding</button>
    <p class="mt-0 mb-0">Paragraph with margin top and bottom removed.</p>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Use gutter classes only on .row elements to control space between columns.

Padding and margin classes can be combined for fine control of spacing.

Sizes 0 to 5 scale spacing from none to large.

Summary

Gutters add space between columns in Bootstrap grids.

Padding and margin classes add space inside or outside elements.

Use size numbers 0-5 to control how much space you want.