Using Bootstrap row-cols to Simplify Uniform Grid Layouts

Repeating Column Span Classes on Every Grid Item

You are building a card list that should show one item per row on phones, two on tablets, and three on desktops. The obvious approach is adding col-12 col-sm-6 col-lg-4 to every child element. That works, but it repeats breakpoint logic across every item and makes global changes tedious.

The useful takeaway is that Bootstrap offers row-cols-* utilities, which declare the number of columns on the parent .row instead of on each child. Direct children can then use plain .col to share the available space equally.

How row-cols-* Changes the Markup

Bootstrap's grid uses flexbox, a CSS layout model that distributes space inside a container. A .row normally sizes each child based on the col-* classes applied to that child. The row-cols-* family sets a column count on the row itself, so each direct child takes an equal fraction of that count without an explicit span. Breakpoints such as sm and lg are viewport width thresholds where the layout can change.

Worked Example: One, Two, Then Three Columns

This markup renders one column below the small breakpoint, two columns from small up, and three columns from large up:

<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3">
  <div class="col">Card one</div>
  <div class="col">Card two</div>
  <div class="col">Card three</div>
</div>

Where to run: Paste this into any HTML file that loads Bootstrap 5 CSS. No build step or server is required. Required permissions: none beyond normal file edit access. Expected checks: open the page in a browser, resize the viewport, and confirm the column count changes at the small and large breakpoints. Risk: if a child already carries a conflicting col-* class, that child's explicit span can override the equal-share behavior.

Trade-off: Uniform Widths vs. Mixed Spans

row-cols-* is ideal when every item should be the same width. It is not a replacement for col-* when you need unequal columns, such as an 8-unit main area beside a 4-unit sidebar. It also applies only to direct children of .row; nested wrappers will not participate.

Practical Verification

1. Load the page with Bootstrap CSS included.
2. Open browser developer tools and select a child element.
3. Resize the viewport across breakpoints.
4. Confirm the computed width changes from 100% to 50% to roughly 33.33% as the row-cols breakpoint activates.
5. Inspect the parent .row to verify the --bs-columns custom property reflects the active breakpoint.

Actionable Step

Start new uniform grids with row-cols-* on the parent and .col on children. Keep explicit col-* classes for layouts that require unequal column widths or non-direct descendants.