The grid system · Bootstrap

Bootstrap's grid divides each row into 12 columns. You say how many of the 12 each item should span, and at which screen sizes.

container, row, col

HTML + Bootstrap

<div class="container py-3">
  <div class="row g-3">
    <div class="col-4"><div class="p-3 bg-primary-subtle rounded">col-4</div></div>
    <div class="col-8"><div class="p-3 bg-success-subtle rounded">col-8</div></div>
  </div>
</div>

Every row has 12 columns to share. Column classes in a row should add up to 12; past 12, the extra columns wrap to a new line.

container centres the layout with sensible side padding,
row starts a new row of columns,
col-4 + col-8 = 12, so together they fill the row,
g-3 sets the gap ("gutter") between columns.

Equal columns

Plain col divides the row equally, however many columns there are:

HTML + Bootstrap

<div class="container py-3">
  <div class="row g-2">
    <div class="col"><div class="p-3 bg-light border rounded text-center">1</div></div>
    <div class="col"><div class="p-3 bg-light border rounded text-center">2</div></div>
    <div class="col"><div class="p-3 bg-light border rounded text-center">3</div></div>
  </div>
</div>

Responsive breakpoints

Add a breakpoint to say "from this screen width up":

A class like col-md-6 applies from its breakpoint upward; smaller screens fall back to the default, stacking full width.

Infix	Applies from	Typical device
(none)	0px	phones
`sm`	576px	large phones
`md`	768px	tablets
`lg`	992px	laptops
`xl`	1200px	desktops

HTML + Bootstrap

<div class="container py-3">
  <div class="row g-3">
    <div class="col-12 col-md-6 col-lg-3"><div class="p-3 bg-warning-subtle rounded">Card 1</div></div>
    <div class="col-12 col-md-6 col-lg-3"><div class="p-3 bg-warning-subtle rounded">Card 2</div></div>
    <div class="col-12 col-md-6 col-lg-3"><div class="p-3 bg-warning-subtle rounded">Card 3</div></div>
    <div class="col-12 col-md-6 col-lg-3"><div class="p-3 bg-warning-subtle rounded">Card 4</div></div>
  </div>
</div>

Read col-12 col-md-6 col-lg-3 as: full width on phones, half width on tablets, a quarter on laptops and up. Open this in the playground and use Open in new tab, then resize the window to watch it adapt.

Nesting

A column can contain its own row:

HTML + Bootstrap

<div class="container py-3">
  <div class="row">
    <div class="col-8 p-3 bg-light border">
      Main area
      <div class="row mt-2 g-2">
        <div class="col-6"><div class="p-2 bg-info-subtle rounded">Nested</div></div>
        <div class="col-6"><div class="p-2 bg-info-subtle rounded">Nested</div></div>
      </div>
    </div>
    <div class="col-4 p-3 bg-secondary-subtle border">Sidebar</div>
  </div>
</div>