Breakpoint tiers (xs, sm, md, lg, xl, xxl) in Bootsrap - Browser Rendering Trace

Render Flow - Breakpoint tiers (xs, sm, md, lg, xl, xxl)

[Load CSS] -> [Parse media queries] -> [Match viewport width] -> [Apply matching breakpoint styles] -> [Recalculate layout] -> [Render updated layout]

The browser reads Bootstrap's CSS including media queries for breakpoints, then applies styles based on the current viewport width, adjusting layout accordingly.

Render Steps - 4 Steps

Code Added:<div class="col-12">

Before

[__________]
[          ]
[  empty   ]
[__________]

→

After

[______________]
[              ]
[    Box       ]
[______________]

The box takes full width on extra small screens (xs) by default with col-12 class.

🔧 Browser Action:Creates DOM element and applies default full width style.

Code Sample

A box that changes width at different screen sizes: full width on extra small, half on small, one-third on medium, and one-quarter on large screens.

Bootsrap

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-6 col-md-4 col-lg-3">Box</div>
  </div>
</div>

Bootsrap

@media (min-width: 576px) { .col-sm-6 { width: 50%; } }
@media (min-width: 768px) { .col-md-4 { width: 33.3333%; } }
@media (min-width: 992px) { .col-lg-3 { width: 25%; } }

Render Quiz - 3 Questions

After applying step 3, what width does the box have on a 800px wide screen?

A Half of the container width

B One-third of the container width

C Full container width

D One-quarter of the container width

Common Confusions - 3 Topics

Why does my column stay full width even on larger screens?

If you only use col-12 without col-sm-, col-md-, etc., the column stays full width on all screen sizes because no breakpoint-specific widths are applied. See render_steps 1 and 2.

💡 Use breakpoint prefixes (col-sm-, col-md-) to change widths at different screen sizes.

Why does the layout not change when I resize the browser?

Bootstrap's breakpoints activate only when the viewport width crosses the min-width thresholds. If your window is smaller than the breakpoint, styles for larger breakpoints won't apply. See render_flow.

💡 Resize past breakpoint widths to see layout changes.

Why do some columns stack vertically on small screens?

Columns without breakpoint widths default to full width on extra small screens, causing stacking. Adding col-sm- or higher classes controls horizontal layout on bigger screens. See render_steps 1 and 2.

💡 Add breakpoint classes to control layout on different screen sizes.

Property Reference

Breakpoint	Min Width (px)	Class Prefix	Typical Use	Visual Effect
Extra small (xs)	None (default)	col-	Phones	Full width by default
Small (sm)	576	col-sm-	Small tablets	Width changes at ≥576px
Medium (md)	768	col-md-	Tablets	Width changes at ≥768px
Large (lg)	992	col-lg-	Desktops	Width changes at ≥992px
Extra large (xl)	1200	col-xl-	Large desktops	Width changes at ≥1200px
Extra extra large (xxl)	1400	col-xxl-	Very large screens	Width changes at ≥1400px

Concept Snapshot

Bootstrap breakpoints define screen size tiers: xs (default), sm (≥576px), md (≥768px), lg (≥992px), xl (≥1200px), xxl (≥1400px). Use classes like col-sm-6 to set column widths at specific breakpoints. Without breakpoint prefixes, columns default to full width on all screens. Breakpoints use min-width media queries to apply styles when viewport is wide enough. This creates responsive layouts that adapt to device size automatically.