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.

Practice

1. Which Bootstrap breakpoint tier applies to extra small devices like phones by default?

easy

A. md

B. xs

C. lg

D. xl

Solution

1. Step 1: Understand Bootstrap breakpoint tiers

   Bootstrap defines breakpoints for different screen sizes: xs, sm, md, lg, xl, and xxl.

2. Step 2: Identify the smallest breakpoint

   The smallest breakpoint is xs, which targets extra small devices like phones.

3. Final Answer:

   xs -> Option B

4. Quick Check:

   Extra small devices = xs [OK]

Hint: Remember xs is for phones, smallest screens [OK]

Common Mistakes:

• Confusing xs with sm or md
• Thinking xl is for phones
• Assuming xs is deprecated

2. Which is the correct Bootstrap class to make a column span 6 units on medium screens and above?

easy

A. col-lg-6

B. col-xs-6

C. col-xxl-6

D. col-md-6

Solution

1. Step 1: Recall Bootstrap column classes

   Bootstrap uses col-{breakpoint}-{number} to set column width at breakpoints.

2. Step 2: Match medium breakpoint with 6 units

   The class col-md-6 sets the column to span 6 units on medium (md) screens and larger.

3. Final Answer:

   col-md-6 -> Option D

4. Quick Check:

   Medium breakpoint + 6 units = col-md-6 [OK]

Hint: Use col-md-6 for medium screens 6 units wide [OK]

Common Mistakes:

• Using col-xs-6 (deprecated)
• Choosing col-lg-6 for medium screens
• Using col-xxl-6 for medium screens

3. What will happen if you use the class d-none d-lg-block on a div?

medium

A. The div is hidden on all screen sizes.

B. The div is visible on medium screens only.

C. The div is visible only on large screens and above.

D. The div is visible only on small screens.

Solution

1. Step 1: Understand the classes used

   d-none hides the element on all screen sizes by default. d-lg-block makes it display as block starting from large (lg) screens and above.

2. Step 2: Combine effects on screen sizes

   On screens smaller than large, the div is hidden. On large and bigger screens, it becomes visible as a block.

3. Final Answer:

   The div is visible only on large screens and above. -> Option C

4. Quick Check:

   d-none + d-lg-block = visible from lg up [OK]

Hint: d-none hides all, d-lg-block shows from large up [OK]

Common Mistakes:

• Thinking div is always hidden
• Assuming visible on small screens
• Confusing lg with md or xl

4. You wrote <div class='col-sm-4 col-md-6'></div> but on medium screens the column is still full width. What is the likely problem?

medium

A. You forgot to include Bootstrap's CSS file.

B. The class 'col-md-6' is invalid syntax.

C. Bootstrap does not support multiple breakpoint classes.

D. You need to add 'col-lg-6' instead.

Solution

1. Step 1: Check the class syntax

   Both col-sm-4 and col-md-6 are valid Bootstrap classes for different breakpoints.

2. Step 2: Consider why styles don't apply

   If the column is full width on medium screens, likely Bootstrap CSS is missing or not loaded, so classes have no effect.

3. Final Answer:

   You forgot to include Bootstrap's CSS file. -> Option A

4. Quick Check:

   Missing CSS means breakpoint classes don't work [OK]

Hint: Check if Bootstrap CSS is linked properly [OK]

Common Mistakes:

• Assuming class syntax is wrong
• Thinking multiple breakpoints not allowed
• Adding wrong breakpoint class

5. You want a button to be full width on extra small and small screens, but auto width on medium and larger screens. Which classes achieve this?

hard

A. btn w-100 w-md-auto

B. btn w-xs-100 w-md-200

C. btn w-100 w-lg-200

D. btn w-100 w-sm-200

Solution

1. Step 1: Understand width utility classes

   w-100 sets width to 100% (full width). w-md-auto resets width to auto starting at medium screens.

2. Step 2: Match requirements

   Full width on xs and sm means w-100. On md and above, auto width with w-md-auto. Bootstrap does not have w-md-200 or similar fixed pixel classes.

3. Final Answer:

   btn w-100 w-md-auto -> Option A

4. Quick Check:

   Full width xs/sm + auto width md+ = btn w-100 w-md-auto [OK]

Hint: Use w-100 for small, w-md-auto for medium+ widths [OK]

Common Mistakes:

• Using non-existent w-xs-100 or w-md-200 classes
• Confusing breakpoint suffixes
• Expecting fixed pixel widths from Bootstrap utilities