Bootstrap 5Layout

Bootstrap 5 Grid Row

Q: Why does my .row have unexpected horizontal scrollbar or overflow?

Bootstrap's .row applies a negative horizontal margin (margin-inline: calc(var(--bs-gutter-x) * -0.5)) to offset column padding. If .row is not inside a .container, .container-fluid, or an element with overflow: hidden, this negative margin can cause a horizontal scrollbar. Always wrap rows in a container, or add overflow-x: hidden to the parent if a container isn't appropriate for your layout.

Q: How do I change the number of columns per row automatically without specifying breakpoints on each column?

Use Bootstrap 5's row columns classes (row-cols-1, row-cols-md-3, row-cols-lg-4) applied directly to the .row element. For example, will show 1 column on mobile, 2 on tablet, and 4 on desktop. Each direct .col child automatically inherits the correct width without needing individual breakpoint classes.

A Bootstrap 5 Grid Row is a horizontal wrapper, created with the .row class, that contains and aligns column elements within the 12-column grid system. It uses CSS Flexbox under the hood to control column layout, spacing, and alignment. Use it whenever you need to arrange content side-by-side, create responsive multi-column layouts, or control gutters between content blocks.

Bootstrap class

.row

Common use cases

Laying out a three-column pricing table where each column displays a plan tier, feature list, and CTA button that collapses to a single column on mobile
Building a two-column blog post layout with a main article area taking 8 columns and a sidebar taking 4 columns on desktop
Arranging a row of four product cards in an e-commerce grid that reflows to two columns on tablet and one column on mobile
Structuring a contact section with a form on the left (col-md-7) and an address/map block on the right (col-md-5)

Variants and classes

Variant	Description and classes	Classes
Basic row	Wraps columns and offsets the gutter.`row + col`	`row + col`
Gutters	Space between columns, horizontal and vertical.`row g-0 to g-5 / gx-* / gy-*`	`row g-0 to g-5 / gx-* / gy-*`
Row columns	Sets how many columns per row at each breakpoint.`row row-cols-1 row-cols-md-3`	`row row-cols-1 row-cols-md-3`
Alignment	Aligns columns vertically and horizontally.`row align-items-center justify-content-between`	`row align-items-center justify-content-between`

Code example

HTML

<div class="container">
  <div class="row g-4 align-items-stretch">
    <div class="col-12 col-md-4">
      <div class="card h-100 p-4">
        <h3 class="h5">Website Audit</h3>
        <p class="text-muted">A full technical review of your site's performance, accessibility, and SEO health.</p>
        <a href="#" class="btn btn-primary mt-auto">Get Started</a>
      </div>
    </div>
    <div class="col-12 col-md-4">
      <div class="card h-100 p-4">
        <h3 class="h5">Content Strategy</h3>
        <p class="text-muted">Keyword research and a 90-day editorial calendar tailored to your industry.</p>
        <a href="#" class="btn btn-primary mt-auto">Get Started</a>
      </div>
    </div>
    <div class="col-12 col-md-4">
      <div class="card h-100 p-4">
        <h3 class="h5">Monthly Reporting</h3>
        <p class="text-muted">Clear monthly dashboards showing traffic, conversions, and ranking changes.</p>
        <a href="#" class="btn btn-primary mt-auto">Get Started</a>
      </div>
    </div>
  </div>
</div>

Live examples

Basic Grid Row

Example 1

Canvas template variants

Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:

Canvas Builder generated grid row with custom colours
Grid Row with interactive states
Responsive grid row for all screen sizes

Best practices

Control gutters with `g-*` instead of manual padding

Bootstrap 5 replaced the old .no-gutters pattern with gutter utilities like g-3, gx-4, or gy-2. Use gx-* to control only horizontal spacing and gy-* for vertical spacing between rows when columns wrap. This prevents double-padding hacks.

Use `align-items-stretch` with `h-100` for equal-height cards

Adding align-items-stretch to the .row and h-100 to inner card elements forces all cards in a row to match the tallest card's height, essential for clean grid-based feature or pricing sections.

Nest rows inside columns for complex layouts

You can place a .row directly inside a .col-* element to create nested sub-grids, useful for form layouts where a field group needs its own independent column structure without breaking the outer grid.

Avoid putting content directly inside `.row`

Always place content inside a .col-* child. Never directly inside .row. The row's negative margins exist to offset column padding, and bypassing columns will break spacing and alignment unpredictably.

FAQ

Why does my .row have unexpected horizontal scrollbar or overflow?

Bootstrap's .row applies a negative horizontal margin (margin-inline: calc(var(--bs-gutter-x) * -0.5)) to offset column padding. If .row is not inside a .container, .container-fluid, or an element with overflow: hidden, this negative margin can cause a horizontal scrollbar. Always wrap rows in a container, or add overflow-x: hidden to the parent if a container isn't appropriate for your layout.

How do I change the number of columns per row automatically without specifying breakpoints on each column?

Use Bootstrap 5's row columns classes (row-cols-1, row-cols-md-3, row-cols-lg-4) applied directly to the .row element. For example, <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-3"> will show 1 column on mobile, 2 on tablet, and 4 on desktop. Each direct .col child automatically inherits the correct width without needing individual breakpoint classes.

How does Canvas Builder handle Grid Row generation?

When you describe a multi-column layout in Canvas Builder, the AI automatically outputs semantic .row wrappers with appropriate column classes, gutter utilities, and responsive breakpoints baked in. It selects column splits based on content type: for example, a sidebar layout gets col-lg-8 and col-lg-4, while a feature grid gets row-cols-1 row-cols-md-3. Brand colours from your Canvas theme are applied to elements inside the columns, not to the row itself, keeping the grid structure clean and override-friendly.