Choosing Bootstrap's Grid: A 12-Column Layout Decision

The problem: a layout that breaks between phone and tablet

You inherit a marketing page with three feature cards. On a desktop monitor they sit side by side. On a tablet held in portrait, the cards either squeeze into unreadable narrow columns or drop into a stack that pushes the footer halfway down the page. The previous developer used fixed pixel widths and a handful of hand-written media queries, so adding a fourth card means recalculating percentages by hand and retesting every breakpoint.

The useful takeaway is that Bootstrap 5's grid can remove that manual arithmetic, but only if your design fits its 12-column model and you verify the breakpoints in a real browser.

What Bootstrap 5's grid actually is

Bootstrap 5 builds its grid on flexbox, a CSS layout mode where a container distributes space among child items. A row is the flex container, and col-* classes are the flex items. The default grid divides width into 12 equal columns, so col-md-4 claims four of them, or one-third of the row.

Five responsive breakpoints drive the classes: xs below 576px, sm at 576px and up, md at 768px and up, lg at 992px and up, and xl at 1200px and up. Classes are mobile-first: a rule declared at md applies at md and above unless overridden at a larger breakpoint. Gutters use CSS custom properties, so spacing can be adjusted at runtime without editing Bootstrap's source SCSS. Bootstrap 5 dropped Internet Explorer 10 support, so the grid assumes modern flexbox behavior.

Worked example: three columns that stack on tablets

Save the following as index.html and open it in a browser. No build step or special permissions are required.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Feature grid</title>
  </head>
  <body>
    <div class="container py-4">
      <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">Feature one</h5>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-4">
          <div class="card h-100">
            <div class="card-body">
              <h5 class="card-title">Feature two</h5>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-4">
          <div class="card h-100">
            <div class="card-body">
              <h5 class="card-title">Feature three</h5>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

container centers the content and adds horizontal padding. row creates the flexbox wrapper, and g-4 sets gutters through CSS custom properties. Each card uses col-12 col-md-4: full width below 768px, then one-third of the row at 768px and above.

For production, replace the CDN link with npm install bootstrap run in your project root, then import only the styles you need. Using a CDN avoids a build step but introduces network dependency and makes it harder to exclude unused CSS.

Verify with browser devtools

Open the page and resize the viewport. At 767px the cards should stack vertically. At 768px they should sit side by side. Right-click a card, choose Inspect, and open the Layout or Computed pane. Below the breakpoint, flex-basis should resolve to 100%; above it, it should resolve to roughly 33.33%. If the columns do not change, confirm the HTML5 doctype and viewport meta tag are present; without them, breakpoints can behave inconsistently.

Trade-offs and limits

• Fixed 12 columns. Five equal columns or a 7/5 split do not map cleanly to 12. You can use auto-sizing col classes, but non-standard proportions usually require custom CSS.
• Bundle size. Loading the full Bootstrap CSS brings components you may never use. Tree-shaking with ES modules can reduce size, but it requires a build toolchain.
• Browser support. Version 5.0 and later dropped legacy Internet Explorer, so the grid is not appropriate if you must support IE10 or earlier.

Closing checklist

• Confirm the design maps to 12 columns or simple fractions such as one-half, one-third, or one-quarter.
• Include <!DOCTYPE html> and the viewport meta tag.
• Test at 576px, 768px, 992px, and 1200px to confirm the grid changes at the expected thresholds.
• Decide whether a CDN link or an npm install fits your deployment pipeline.
• If the layout needs five or seven equal columns, plan to supplement Bootstrap with custom CSS rather than forcing the 12-column grid.

Practical check: after implementing, open your page in Chrome or Firefox, toggle the device toolbar, and confirm the column count changes at each breakpoint. Inspect a column's computed width to verify it matches the 1/12th multiplier for its class.