Bootstrap Columns: col, offset, order and row-cols

Columns are where Bootstrap layouts happen. A row is split into 12 equal parts, and each column says how many of them it takes, at which screen size. This guide covers the column classes in detail: equal and sized columns, responsive widths, auto-width columns, offsets, reordering, row columns for card grids, gutters, nesting, and the mistakes that break layouts. For the bigger picture of containers, rows, and breakpoints, start with the Bootstrap grid guide. Everything is for Bootstrap 5.3.

Column class cheat sheet

Class	Meaning
col	Equal share of the row’s space
col-6	6 of 12 parts (half), on every screen
col-md-4	4 of 12 parts from the md breakpoint (768px) up; full width below
col-auto	As wide as its content
col-md-auto	As wide as its content from md up
offset-md-3	Pushes the column 3 parts to the right from md up
order-md-2, order-first, order-last	Changes the visual order
row-cols-3, row-cols-md-3	Set on the row: every child column takes a third

The breakpoints are sm (576px), md (768px), lg (992px), xl (1200px), and xxl (1400px); see Bootstrap breakpoints.

Equal-width columns

<div class="container">
  <div class="row">
    <div class="col">One</div>
    <div class="col">Two</div>
    <div class="col">Three</div>
  </div>
</div>

Every .col gets an equal share, however many there are. Columns must be direct children of a .row, and rows belong inside a container.

Sized columns

Numbers say how many of the 12 parts a column takes:

<div class="row">
  <div class="col-8">Main content</div>
  <div class="col-4">Sidebar</div>
</div>

The numbers in a row should add up to 12. If they add up to more, the extra columns wrap onto a new line, which is sometimes what you want, as in a grid of cards.

Mix sized and equal columns, and the equal ones share what’s left:

<div class="row">
  <div class="col-6">Half</div>
  <div class="col">Quarter</div>
  <div class="col">Quarter</div>
</div>

Responsive columns

Add a breakpoint to the class, and it applies from that screen width up. Below it, columns stack at full width:

<div class="row">
  <div class="col-12 col-md-8">Main content</div>
  <div class="col-12 col-md-4">Sidebar</div>
</div>

col-12 is the default, so you can leave it out. Combine several breakpoints to change the layout step by step:

<div class="row">
  <div class="col-sm-6 col-lg-3">A</div>
  <div class="col-sm-6 col-lg-3">B</div>
  <div class="col-sm-6 col-lg-3">C</div>
  <div class="col-sm-6 col-lg-3">D</div>
</div>

That’s one column on phones, two from 576px, and four from 992px.

Auto-width columns

col-auto makes a column only as wide as its content, and the other columns fill the rest. It’s the right choice for a button or an icon next to flexible content:

<div class="row align-items-center">
  <div class="col">Your trial ends in 3 days.</div>
  <div class="col-auto"><a href="/billing" class="btn btn-primary btn-sm">Upgrade</a></div>
</div>

Offsets

An offset adds empty space to the left of a column, measured in grid parts:

<div class="row">
  <div class="col-md-6 offset-md-3">Centered, half width from md up</div>
</div>

To push a column to the right edge, an auto margin is often simpler than an offset:

<div class="row">
  <div class="col-auto">Left</div>
  <div class="col-auto ms-auto">Pushed right</div>
</div>

More ways to center are in how to center a div in Bootstrap.

Reordering columns

Change the visual order without changing the HTML:

<div class="row">
  <div class="col-md-8 order-md-2">Main content</div>
  <div class="col-md-4 order-md-1">Sidebar</div>
</div>

On phones the main content comes first; from md up the sidebar moves to the left. order-first and order-last move a column to either end, and order-0 to order-5 set explicit positions. Keep the HTML in the order that makes sense to read, since screen readers and keyboard users follow the HTML, not the visual order.

Row columns: grids of cards

Instead of sizing each column, tell the row how many columns fit per line:

<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-4">
  <div class="col"><div class="card h-100">...</div></div>
  <div class="col"><div class="card h-100">...</div></div>
  <div class="col"><div class="card h-100">...</div></div>
  <div class="col"><div class="card h-100">...</div></div>
</div>

That’s one card per line on phones, two from sm, and three from lg, however many cards there are. row-cols-auto sizes each column to its content. The Bootstrap cards guide covers equal-height cards in these grids.

Gutters

Gutters are the spaces between columns, 1.5rem by default. Change them on the row:

Class	Effect
g-0	No gutters
g-1 to g-5	Smaller or larger gutters, both directions
gx-*	Horizontal gutters only
gy-*	Vertical gutters only, for columns that wrap
g-md-4	A gutter size from a breakpoint up

<div class="row gx-5 gy-3">...</div>

Nesting columns

Put a new .row inside a column to split it again. The nested row has its own 12 parts:

<div class="row">
  <div class="col-md-8">
    <div class="row">
      <div class="col-6">Nested half</div>
      <div class="col-6">Nested half</div>
    </div>
  </div>
  <div class="col-md-4">Sidebar</div>
</div>

Vertical and horizontal alignment

Rows are flex containers, so the flex utilities work on them:

• align-items-center on the row lines up columns vertically; align-self-end on one column moves just that one.
• justify-content-center, justify-content-between, and justify-content-end on the row place columns that don’t fill all 12 parts.

Common mistakes

Columns not side by side. The columns aren’t direct children of a .row, or there’s an extra wrapper between them. Remove the wrapper or put it inside the column.

A horizontal scrollbar on phones. A .row sits outside a container. Rows have negative margins that the container’s padding balances.

Using Bootstrap 4 classes. col-xs-* came from Bootstrap 3; in Bootstrap 4 and 5 the smallest size has no infix, so col-6 applies to phones. offset-md-3 replaced col-md-offset-3, and ms-auto replaced ml-auto.

Padding on the column itself breaks the layout. Put your own padding, borders, and backgrounds on an element inside the column, not on the .col, so the gutters stay intact.

FAQ

How many columns does the Bootstrap grid have?

Twelve. Each row is divided into 12 equal parts, and column classes such as col-4 or col-md-6 say how many parts a column takes. You can change the number with the $grid-columns Sass variable.

How do I make columns stack on mobile in Bootstrap?

Use breakpoint classes such as col-md-6. The column is full width below the breakpoint, so columns stack on phones, and sit side by side from that screen width up.

How do I center a column in Bootstrap?

Add offset-md-3 to a col-md-6 column, or add justify-content-center to the row. Both put the column in the middle of the row from the medium breakpoint up.

What does col-auto mean in Bootstrap?

col-auto makes a column only as wide as its content. The other columns in the row share the remaining space. Use col-md-auto to apply it only from the medium breakpoint up.

How do I change the space between columns in Bootstrap?

Add a gutter class to the row: g-0 removes the space, g-1 to g-5 change it, and gx-* or gy-* change only the horizontal or vertical gutters.