Bootstrap Grid System

Grid System

The grid system is mobile-first. Base classes like .col-6 apply to all sizes. Breakpoint classes (.col-md-4) apply from that size upward.

Rows must sit inside .container or .container-fluid. Only .col-* elements should be direct children of .row (with rare exceptions).

Real-life example: The grid system is like city zoning — the same land (row) can hold different building sizes (columns) depending on how wide the street is (screen).

<div class="container text-center">
  <div class="row">
    <div class="col border p-2">1 of 12</div>
    <div class="col border p-2">1 of 12</div>
    <!-- ... six equal cols use col-2 each -->
    <div class="col-2 border p-2">col-2</div>
    <div class="col-2 border p-2">col-2</div>
    <div class="col-8 border p-2">col-8 (wider main area)</div>
  </div>
</div>

Auto-layout columns

Use .col without a number for equal-width columns that share space automatically. .col-auto sizes to content.

Real-life example: Auto columns are like friends splitting a bench equally — no one measured inches, everyone gets the same share.

<div class="container">
  <div class="row">
    <div class="col bg-light p-3">Auto</div>
    <div class="col bg-light p-3">Auto</div>
    <div class="col bg-light p-3">Auto</div>
  </div>
</div>