Bootstrap Columns & Gutters — Sizing, Wrapping, Spacing

In this tutorial, you will learn about Bootstrap Columns & Gutters. We cover key concepts, practical examples, and best practices to help you master this topic.

Bootstrap columns support explicit numerical widths, auto-layout distribution, and content-based sizing. Gutters manage the spacing between columns with gx-, gy-, and g- utility classes.

What You'll Learn

You will learn how to size columns explicitly, use auto-layout for equal distribution, wrap columns to new rows, and control gutter spacing at different breakpoints.

Why It Matters

Column sizing and gutters determine how content fits on the page. DodaTech's documentation uses auto-layout columns for flexible spacing and custom gutters for tighter or wider content areas.

Real-World Use

The Doda Browser download page uses g-0 gutters for an edge-to-edge banner and g-4 gutters for the feature comparison section, adapting spacing to content density.

flowchart LR
    A[Grid Options] --> B[Column Sizing]
    A --> C[Auto Layout]
    A --> D[Gutters]
    B --> E[Explicit Widths]
    B --> F[Variable Content]
    D --> G[Horizontal gx]
    D --> H[Vertical gy]
    style A fill:#7952b3,stroke:#563d7c,color:#fff
    style E fill:#22c55e,stroke:#16a34a,color:#fff

Column Sizing Methods

Explicit Number Columns

<div class="container">
  <div class="row">
    <div class="col-3">25%</div>
    <div class="col-6">50%</div>
    <div class="col-3">25%</div>
  </div>
</div>

Expected output: Three columns at 25%, 50%, and 25% widths respectively.

Auto-Layout Columns

<div class="container">
  <div class="row">
    <div class="col">Auto 1</div>
    <div class="col">Auto 2</div>
    <div class="col">Auto 3</div>
    <div class="col">Auto 4</div>
  </div>
</div>

Expected output: Four equal-width columns. Each takes 25% of the row automatically.

Variable Content Width

<div class="container">
  <div class="row">
    <div class="col">Flexible</div>
    <div class="col-auto">Just as wide as my content</div>
    <div class="col">Flexible</div>
  </div>
</div>

Expected output: The middle column is only as wide as its text content. The outer columns split the remaining space.

Column Wrapping

When column widths in one row exceed 12, remaining columns wrap to the next line:

<div class="container">
  <div class="row">
    <div class="col-4">col-4</div>
    <div class="col-4">col-4</div>
    <div class="col-4">col-4</div>
    <div class="col-4">col-4 (wraps to new row)</div>
  </div>
</div>

Expected output: Three columns on the first row, and the fourth column wrapping to a second row.

Gutters

Gutters are the padding between columns. Bootstrap 5 provides gutter classes with gx-* (horizontal), gy-* (vertical), and g-* (both).

<div class="container">
  <div class="row gx-5">
    <div class="col-6">
      <div class="bg-light p-3">Wide horizontal gutter (gx-5)</div>
    </div>
    <div class="col-6">
      <div class="bg-light p-3">Wide horizontal gutter (gx-5)</div>
    </div>
  </div>
</div>

Expected output: Two columns with extra-wide horizontal spacing between them.

Gutter classes range from g-0 (no gutter) to g-5 (maximum). The default gutter is gx-3 (1rem / 16px).

Removing Gutters

<div class="container">
  <div class="row g-0">
    <div class="col-6">
      <img src="..." class="img-fluid" alt="Edge-to-edge image">
    </div>
    <div class="col-6">
      <img src="..." class="img-fluid" alt="Edge-to-edge image">
    </div>
  </div>
</div>

Expected output: Two images placed flush next to each other without any gap.

Responsive Gutters

<div class="container">
  <div class="row g-2 g-lg-5">
    <div class="col-4">Small gutters on mobile, wide on desktop</div>
    <div class="col-4">Small gutters on mobile, wide on desktop</div>
    <div class="col-4">Small gutters on mobile, wide on desktop</div>
  </div>
</div>

Expected output: Columns have tight spacing on small screens (g-2) and wide spacing on large screens (g-lg-5).

Common Mistakes

1. Using Gutters on the Wrong Element

Gutter classes go on the row, not on the columns or container. Placing g-3 on a column has no effect.

2. Setting Gutters Higher Than 5

Gutters only go up to g-5 (3rem). For wider spacing, use padding utilities on columns or margin utilities on content.

3. Forgetting That Old gutter Syntax Changed

Bootstrap 4 used no-gutters. Bootstrap 5 uses g-0. Mixing syntaxes produces no effect.

4. Expecting Equal Gutters on Nested Grids

Nested grids create their own gutters. A nested row gets the default gutter even if the parent row has custom gutters.

5. Columns That Wrap Unexpectedly

When using explicit column widths that exceed 12, columns wrap. Check your total to ensure columns stay on one row.

Practice Questions

1. What is the default gutter size in Bootstrap 5? gx-3 (1rem / 16px horizontal gutter).

2. How do you remove gutters entirely? Add g-0 class to the row.

3. What does col-auto do? It makes the column width adjust to its content. The column is only as wide as its text or inner elements.

4. How do you set different horizontal and vertical gutters? Use gx-* for horizontal and gy-* for vertical. Combine them on the same row.

5. What happens when you use 5 col-3 columns in one row? The total would be 15, so the fifth column wraps to a new line.

Challenge

Create a row with 6 equal columns that have no gutters on mobile and medium gutters on desktop. Each column should contain a colored box.

FAQ

Mini Project

Build a photo gallery grid with 3 columns on desktop and 1 on mobile. Use g-0 for a masonry-style edge-to-edge look. Each cell should contain an image placeholder.

What's Next

With column and gutter mastery, move to Bootstrap Typography for text styling. Then learn Bootstrap Colors and Backgrounds for visual design.