Why are my Bootstrap columns stacking? (Grid System Explained)

The main reasons for Bootstrap column stacking are that the total column width exceeds 12, the responsive class does not match the current viewport or the width class is missing; the solution requires setting a mobile-first basic width, ensuring that the columns are within .row, and unifying the version naming convention.

Bootstrap columns stack when the total column width exceeds 12 in a row—or more commonly—when you're using responsive classes that don't match the current viewport size. It's rarely a bug; it's usually a mismatch between your class choices and how Bootstrap's grid actually works.

How Bootstrap's grid really works

Bootstrap uses a 12-column, mobile-first flexbox grid. Each row is a flex container, and columns (like .col-6 , .col-md-4 ) are flex items that add up to 12 per row *at their target breakpoint*. If they don't add to 12—or if no width class is set at the current screen size—Bootstrap defaults to full-width (100%) , causing stacking.

• No width class = .col-12 : If you write <div class="col"> without a number or breakpoint, it's equivalent to <code>.col-12 on all screens — so it stacks by design.
• Breakpoint mismatch : .col-md-6 only applies from medium up (≥768px). On mobile, it has no width → becomes .col-12 → stacks.
• Sum > 12 : .col-7 .col-7 in one row forces wrapping—even on large screens—because 7 7 = 14 > 12.

Common fixes you can try now

Most stacking issues resolve with one of these adjustments:

• Add a mobile-first base: Use .col-6 or .col-12 *before* adding larger breakpoints. Example: <div class="col-12 col-md-6"> full stays-width on mobile, halves on medium .<li> Check for missing <strong>.row</strong> : Columns must be direct children of <strong>.row</strong> . Nesting them in plain <code><div> breaks flex alignment and often causes unintended wrap.<li> Avoid mixing old and new classes: Don't mix <code>.col-sm-4 (v4) with .col-lg (v5 shorthand)—stick to one version's naming convention.
• Use .col-auto for content-sized columns (eg, buttons or labels), then pair with .col for fluid siblings—this prevents forced wrapping.

Debugging tip: inspect the computed width

In browser DevTools, hover the column element and check its computed flex-basis or width . If it says 100% or auto when you expected 50% , that confirms the class isn't applying at that breakpoint. Look for:

• Missing or incorrect breakpoint prefix ( sm vs md )
• CSS overrides elsewhere (eg, a global width: 100% !important )
• Parent .row missing display: flex (check if another framework or custom CSS interfered)

Basically just these three things: set widths for the smallest screen you support, keep sums at 12 per row, and always wrap columns in .row . It's not complex—but it's easy to overlook one detail and wonder why everything's vertical.