Understanding Bootstrap 5's Responsive Grid: Column Classes, Breakpoints, and Nesting

Use column classes to control width at each breakpoint

Bootstrap’s grid is built on a 12‑column system. By adding col-* classes you tell the browser how many of those 12 columns an element should occupy at a given viewport size. The asterisk stands for a breakpoint prefix (xs, sm, md, lg, xl, xxl) or can be omitted for the extra‑small baseline. When the viewport reaches a breakpoint, the matching class takes effect; larger breakpoints override smaller ones unless you explicitly reset them.

Worked example

The following markup creates a full‑width block on phones, two equal columns on medium tablets, and a 4‑column / 8‑column split on large desktops:

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">Main content</div>
    <div class="col-12 col-md-6 col-lg-8">Sidebar</div>
  </div>
</div>

Explanation:

• col-12 makes each element span all 12 columns on extra‑small screens (phones), so they stack vertically.
• At the md breakpoint (≥768 px) the classes col-md-6 give each element six columns, i.e. 50 % of the row width, producing two side‑by‑side columns.
• At the lg breakpoint (≥992 px) the col-lg-4 and col-lg-8 classes take over, giving the first element 4/12 ≈ 33.3 % and the second 8/12 ≈ 66.6 % of the row.

Limits of the grid

Even though the system is flexible, it has a few hard constraints you must respect:

• Each .row can contain at most 12 column units. If the sum of the col-* values exceeds 12, the excess columns wrap to a new line automatically.
• Nested grids must again observe the 12‑column rule inside the parent column. A nested .row does not inherit the parent’s width; it starts its own 12‑column count.
• The grid relies on flexbox; setting explicit widths (e.g., width: 300px) or margins on a column can interfere with the calculated flex basis and cause overflow or unexpected wrapping.

Common mistakes and how to avoid them

• Missing .row wrapper – columns placed directly inside a .container will not get the negative margin that offsets the container’s padding, leading to unwanted horizontal scroll.
• Omitting a parent .container or .container-fluid – without it the grid lacks the horizontal padding that keeps content from touching the viewport edge.
• Mixing breakpoint classes without understanding override rules – for example col-md-6 col-lg-3 means the element is six columns wide at medium and up, but at large it becomes three columns because the lg class overrides the md one. If you want the medium width to persist, add an explicit col-lg-6 or reset with col-lg-auto.
• Using fixed pixel widths inside columns (e.g., style="width:250px;") – this breaks the fluid behavior and can cause overflow on small screens. Prefer utility classes like w-50 or let the grid manage width.

Verification steps

1. Copy the example markup into a blank HTML file that includes Bootstrap 5 CSS (via CDN or local copy).
2. Open the file in a browser and open DevTools.
3. Toggle the device toolbar or resize the window to the breakpoint ranges: <576px (xs), ≥576px (sm), ≥768px (md), ≥992px (lg), ≥1200px (xl), ≥1400px (xxl).
4. Inspect each column; the computed width should match the expected fraction of the row’s width (e.g., 50 % at md, 33.33 % and 66.66 % at lg).
5. If columns wrap unexpectedly, check that the total of the col-* values in that row does not exceed 12 and that no custom width or margin rules are overriding the grid.