Bootstrap 5 Grid Infixes: Why col-sm-6 col-lg-3 Behaves the Way It Does

The layout problem: columns that collapse at the wrong width

You are building a product listing. On phones, each card should take the full width. On tablets, two cards side by side feels right. On desktops, four cards fit comfortably. You write col-12 col-sm-6 col-lg-3, resize the browser, and discover the layout jumps from two columns to four at an unexpected pixel width—or worse, the cards look squeezed on a small laptop because the col-lg-3 rule started earlier than you expected.

The useful takeaway is simple: Bootstrap 5 grid classes do not describe a single screen size. They describe a minimum breakpoint and every size above it, until another class overrides them. If you design for "mobile, tablet, desktop" as three isolated buckets, you will miss the intermediate widths where two rules overlap.

How Bootstrap 5 breakpoint infixes cascade

Bootstrap 5 ships with six breakpoints: xs, sm, md, lg, xl, and xxl. The xs infix is implied, so col-12 applies from the smallest width upward. Every other infix generates a @media (min-width: ...) rule.

Because of that cascade, col-sm-6 col-lg-3 means:

• Below sm: full width (col-12 is implied if you omit a smaller class, but if you only write col-sm-6, the element reverts to auto width below sm unless you also declare col-12).
• sm through lg-1: half width.
• lg and above: one-quarter width.

The browser uses the last matching media query in source order, which is why col-lg-3 wins over col-sm-6 once the viewport reaches the lg threshold.

Worked example: a responsive card grid

This markup produces one column on phones, two on tablets and small laptops, and four on large desktops:

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-6 col-lg-3">Card 1</div>
    <div class="col-12 col-sm-6 col-lg-3">Card 2</div>
    <div class="col-12 col-sm-6 col-lg-3">Card 3</div>
    <div class="col-12 col-sm-6 col-lg-3">Card 4</div>
  </div>
</div>

The .row wrapper is required. It applies negative margins that cancel the padding on .container and the gutters between columns. Without .row, columns can overflow the container horizontally or sit flush against its edges.

To verify the breakpoints, open your browser's developer tools, select one card, and watch the width property as you resize:

Viewport width	Active rule	Resulting layout
< 576 px	Implied col-12	1 column
576–767 px	@media (min-width: 576px) .col-sm-6	2 columns
768–991 px	@media (min-width: 768px) .col-md-* if present, otherwise .col-sm-6 still applies	2 columns unless overridden
≥ 992 px	@media (min-width: 992px) .col-lg-3	4 columns

Default Bootstrap 5 breakpoints start at 576 px (sm), 768 px (md), 992 px (lg), and 1200 px (xl). Your compiled CSS may differ if your project customizes Sass variables.

Mixing auto-layout columns with fixed widths

Auto-layout columns—written as col without a number—divide leftover space equally. They are useful when you do not know how many items will appear. However, they do not cooperate gracefully with fixed-width siblings.

If you place col next to col-md-4, the fixed column claims its percentage first. The auto column takes whatever remains, which can be much narrower than you expect on smaller screens. If you need equal columns only above a breakpoint, write col-md on every item rather than mixing col and col-md-4.

Limitations and how to check your work

Changing breakpoints requires editing Sass variables such as $grid-breakpoints and recompiling the stylesheet. Overriding media queries with custom CSS does not change Bootstrap's built-in infix classes, so col-md-4 will still trigger at Bootstrap's default md width unless you rebuild.

Auto-layout columns also size to content by default (width: auto). If a sibling column contains a long unbroken string, the auto column can shrink below its intended size.

Practical check: inspect the compiled CSS for rules like @media (min-width: 768px) { .col-md-4 { width: 33.333333%; } }. If the rule is missing or at a different width, your build is using customized breakpoints or an older Bootstrap version.

Closing decision

Start with the smallest layout and add breakpoints only when the design changes. Declare a base width such as col-12 so elements never fall back to auto-layout on narrow screens. Verify in dev tools at each default breakpoint, and treat Sass customization as a build step, not a CSS override.