BS5 Grid Basic

Every .row is divided into 12 invisible columns. Children use .col-md-6 (half), .col-lg-4 (third), etc. Numbers in the same row should add up to 12.

html
<div class="row">
  <div class="col">A</div>
  <div class="col">B</div>
  <div class="col">C</div>
</div>

Three children → each gets 1/3 (12 ÷ 3 = 4 cols each). No math needed.

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

At ≥768 px (md), Main = 8/12 (66%), Sidebar = 4/12 (33%). Below 768 px each stacks full-width.

Twitter Bootstrap's 12-column grid is the most-cloned design pattern on the web — Tailwind's grid + CSS-only frameworks all reference it.

Important. Columns must be inside a .row, and .row must be inside a .container. Skipping any layer = broken padding/margins.

• 12-column responsive grid system
• Define columns with .col, .col-{breakpoint}-{n}, or .col-{n}
• Rows + columns use flexbox under the hood since v4
• Auto-stack on narrow screens — explicit responsive control with breakpoint suffix

1. Build a 2-column layout: 8/4 split on md+, stacked on mobile.
2. Build a 3-column layout: 4/4/4 on md+, 6/6/12 on small screens.
3. Build a card grid using .row-cols-md-3 shorthand.

• Use .row-cols-* for equal-width columns (e.g. .row-cols-md-4) — cleaner than .col-md-3 × 4.
• Add .g-3 or .gx-3 gy-2 for tasteful gutters.
• Avoid mixing .col-md-* and free .col in the same row — outputs unpredictable widths.