Bootstrap 5Layout

Bootstrap 5 Grid Row

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.

Primary Class

.grid-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 & Classes

Variant	Description	Classes
Grid Row Default	Standard grid row with Bootstrap's default styling.	`grid-row`
Grid Row Responsive	Responsive variant that adapts to different screen sizes.	`grid-row grid-row-responsive`

Code Example

<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 Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓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.