Skip to content
Bootstrap 5Layout

Bootstrap 5 Grid Column

A Bootstrap 5 Grid Column (col) is a horizontal division within a .row container that uses a 12-column flexbox system to control content width and layout across breakpoints. Use it whenever you need to place content side by side, build responsive multi-column layouts, or control exactly how wide a section appears at different screen sizes.

Bootstrap class

.col

Common use cases

  • Building a three-column pricing table where each plan occupies col-md-4, collapsing to full-width on mobile
  • Creating a two-column blog layout with a col-lg-8 article body and a col-lg-4 sidebar for related posts and ads
  • Laying out a product grid on an e-commerce page using col-6 col-md-4 col-lg-3 so cards reflow from 2 to 3 to 4 per row as screen width increases
  • Splitting a contact page into a col-md-6 enquiry form and a col-md-6 map embed that stack vertically on phones

Variants and classes

VariantDescription and classes
Equal widthColumns share the row equally.col
Sized columnsSpan a set number of the 12 columns per breakpoint.col-4 / col-md-6 / col-lg-3
Auto widthColumn sized to its content.col-auto
Offsets and orderShift or reorder columns.offset-md-2 / order-first / order-md-last

Code example

HTML
<div class="container">
  <div class="row g-4">
    <div class="col-12 col-md-4">
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">Starter Plan</h5>
          <p class="card-text">Perfect for freelancers and solo founders launching their first product.</p>
          <a href="#" class="btn btn-outline-primary">Get Started</a>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-4">
      <div class="card h-100 border-primary">
        <div class="card-body">
          <h5 class="card-title">Pro Plan</h5>
          <p class="card-text">Designed for growing teams that need collaboration tools and priority support.</p>
          <a href="#" class="btn btn-primary">Upgrade Now</a>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-4">
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">Enterprise Plan</h5>
          <p class="card-text">Custom contracts, SSO, and a dedicated account manager for large organisations.</p>
          <a href="#" class="btn btn-outline-secondary">Contact Sales</a>
        </div>
      </div>
    </div>
  </div>
</div>

Live examples

Basic Grid Column

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 column with custom colours
  • Grid Column with interactive states
  • Responsive grid column for all screen sizes

Best practices

Use g-* gutter classes instead of manual padding

Bootstrap 5 replaced the old .no-gutters approach with gutter utilities like g-3 or gx-4 / gy-2 on the .row element. This gives you independent horizontal and vertical gap control without writing custom CSS.

Combine auto-width and fixed-width columns in the same row

Place a fixed col-md-3 sidebar next to a col-md auto column and Bootstrap will automatically expand the auto column to fill the remaining space, ideal for dashboard layouts without hardcoding every width.

Use offset classes for centring single columns

Instead of wrapping a narrow column in a justify-content-center row, apply offset-md-3 to a col-md-6 to push it to the visual centre, useful for narrow forms or single-column article bodies.

Order columns visually without changing HTML source

Use order-md-1 and order-md-2 on columns to reverse their visual display at a specific breakpoint, common when you want an image to appear above text on mobile but beside it on desktop.

FAQ

How do I make columns stack on mobile but sit side by side on desktop?
Give each column the class col-12 col-md-6 (or whatever fraction you need). The col-12 applies below the md breakpoint (768px), making each column full-width and stacked. At md and above, col-md-6 kicks in and places two columns side by side. You can chain as many breakpoint variants as you like, e.g. col-12 col-sm-6 col-lg-4, to control exactly how the layout reflows at every size.
Can I control vertical alignment and spacing inside a column?
Yes. For vertical alignment within a row, add align-self-start, align-self-center, or align-self-end to individual columns. For spacing between the column's inner content and its edges, use Bootstrap's padding utilities (p-3, px-4, etc.) directly on the col element or on a wrapper div inside it. Avoid removing Bootstrap's built-in column padding entirely unless you're using g-0 on the parent row, or your column borders will touch.
How does Canvas Builder generate Grid Column components?
When you describe a layout in Canvas Builder (for example, 'three equal pricing cards') the AI outputs a complete .container > .row > .col-* structure with the correct responsive classes already applied. It respects the Canvas HTML template conventions, wires in your brand's primary colour for button variants, and generates the gutter class on the row so spacing is consistent without any manual CSS.