Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Gutters in Bootstrap 5
Gutters: The padding between columns that creates consistent spacing in your grid layouts.
What are Gutters?
Gutters are the gaps between columns that provide breathing room and visual separation. Bootstrap provides flexible gutter utilities to control spacing.
Without Gutters
Column 1
Column 2
Columns touch each other - no spacing.
With Gutters
Column 1
Column 2
Columns have consistent spacing between them.
Gutter Classes
Gutter Size Options
| Class | Size | Horizontal Gap | Vertical Gap | Use Case |
|---|---|---|---|---|
g-0 | No gutters | 0px | 0px | Full-bleed designs |
g-1 | Extra Small | 0.25rem (4px) | 0.25rem (4px) | Tight layouts |
g-2 | Small | 0.5rem (8px) | 0.5rem (8px) | Default spacing |
g-3 | Medium | 1rem (16px) | 1rem (16px) | Standard spacing |
g-4 | Large | 1.5rem (24px) | 1.5rem (24px) | Prominent separation |
g-5 | Extra Large | 3rem (48px) | 3rem (48px) | Hero sections |
Visual Comparison
g-0Column
Column
g-1Column
Column
g-2Column
Column
g-3Column
Column
g-4Column
Column
g-5Column
Column
Horizontal vs Vertical Gutters
Directional Gutter Control
Horizontal Gutters Only (gx-*)
Column 1
Column 2
Column 3
Column 4
<div class="row gx-4">
<!-- Horizontal spacing between columns -->
<!-- No vertical spacing between rows -->
</div>Vertical Gutters Only (gy-*)
Row 1
Row 2
Row 3
<div class="row gy-4">
<!-- Vertical spacing between rows -->
<!-- No horizontal spacing between columns -->
</div>Tip: Use
gx-* for horizontal spacing and gy-* for vertical spacing. Combine them for different spacing in each direction.Responsive Gutters
Breakpoint-based Gutter Sizes
Different Gutter Sizes on Different Screens
g-2 on mobile
g-3 on tablet
g-4 on desktop
g-3 on tablet
g-4 on desktop
Same responsive gutters
More space on larger screens
<div class="row g-2 g-md-3 g-lg-4">
<!--
Small gutters on mobile (g-2)
Medium gutters on tablet (g-md-3)
Large gutters on desktop (g-lg-4)
-->
</div>| Screen Size | Class Applied | Gutter Size | Visual Effect |
|---|---|---|---|
| Mobile (<768px) | g-2 | 0.5rem (8px) | Tighter spacing |
| Tablet (≥768px) | g-md-3 | 1rem (16px) | Standard spacing |
| Desktop (≥992px) | g-lg-4 | 1.5rem (24px) | More breathing room |
Gutter Removal (g-0)
When to Remove Gutters
Full-Width Image Grid
Image 1
Image 2
Image 3
<!-- Image gallery without gaps -->
<div class="row g-0">
<div class="col-4">
<img src="image1.jpg" class="img-fluid" alt="">
</div>
<!-- More images... -->
</div>Data Table Layout
Header 1
Header 2
Header 3
Data 1
Data 2
Data 3
Note: When using
g-0, you may need to add borders or other visual separators since there's no spacing between elements.Nested Grid Gutters
Managing Gutters in Nested Grids
Parent with Gutters, Child with Different Gutters
Parent Column
Nested (g-1)
Nested (g-1)
Simple Column
<div class="row g-3"> <!-- Parent gutters -->
<div class="col-6">
<div class="row g-1"> <!-- Child gutters -->
<div class="col-6">Nested</div>
<div class="col-6">Nested</div>
</div>
</div>
<div class="col-6">Simple</div>
</div>Best Practice: Use smaller gutter sizes in nested grids to maintain visual hierarchy and prevent excessive spacing.
Gutter Best Practices
Choosing the Right Gutter Size
- Content density: Dense content → smaller gutters
- Visual hierarchy: More important content → more space
- Readability: Text content needs adequate spacing
- Responsive design: Adjust gutters for different screen sizes
Common Gutter Patterns
g-3- Default for most layoutsg-4- Hero sections, feature highlightsg-2- Dashboards, data-heavy interfacesg-0- Image galleries, full-bleed designsgx-3 gy-2- Different horizontal/vertical spacing
Common Gutter Mistakes
- ❌ Forgetting to add gutter classes
- ❌ Using inconsistent gutter sizes
- ❌ Not adjusting gutters for mobile
- ❌ Overusing
g-0making content feel cramped - ❌ Using
g-5in dense layouts
Practical Examples
Example 1: Card Grid
Card 1
Equal spacing around cards
Card 2
Consistent gutters
Card 3
Professional spacing
<div class="row g-3">
<div class="col-md-4">
<div class="card">...</div>
</div>
<!-- More cards... -->
</div>Example 2: Form Layout
First Name
Last Name
Email Address
<div class="row g-2">
<div class="col-md-6">
<input type="text" class="form-control">
</div>
<div class="col-md-6">
<input type="text" class="form-control">
</div>
</div>Gutter Customization
Custom Gutter Sizes (SCSS)
You can customize gutter sizes in your SCSS variables:
// Custom gutter sizes
$grid-gutter-width: 2rem; // Default: 1.5rem
// Custom gutter map
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
6: $spacer * 4, // Custom larger size
7: $spacer * 5 // Custom extra large
);
// Generate custom gutter classes
@import "bootstrap/scss/bootstrap";Note: Custom gutter sizes require compiling Bootstrap from SCSS source files.
