Breakpoint tiers (xs, sm, md, lg, xl, xxl) in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Bootstrap breakpoint tiers

Which Bootstrap breakpoint tier corresponds to screen widths starting at 992px?

A md

B lg

C sm

D xl

💡 Hint

Remember the order: xs, sm, md, lg, xl, xxl and their pixel values.

Bootstrap's lg breakpoint starts at 992px width. It is used for large devices like desktops.

📝 Syntax

intermediate

Correct Bootstrap class for medium breakpoint

Which class applies a red background only on medium (md) screens and larger?

A bg-red-md

B bg-danger-md

C bg-danger

D bg-danger d-md-block

💡 Hint

Bootstrap uses utility classes like bg-danger for colors, but breakpoint prefixes are different.

Bootstrap color utilities like bg-danger apply color on all screen sizes. To apply only on medium and up, you combine display utilities or custom CSS, but bg-danger alone is correct for color.

❓ rendering

advanced

Visual effect of Bootstrap grid classes

What is the visual layout result of this HTML snippet?

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

A On all screen sizes, boxes are stacked vertically.

B On small screens, all boxes stack vertically; on large screens, Box 1 and Box 2 share a row, Box 3 is below full width.

C On large screens, Box 1 and Box 2 are full width stacked, Box 3 shares a row with Box 1.

D On small screens, Box 1 and Box 2 share a row, Box 3 is full width below; on large screens, all three boxes share one row equally.

💡 Hint

Check how col-sm and col-lg classes control width at different breakpoints.

At small screens (≥576px), Box 1 and Box 2 each take half width (6 columns), so they share a row. Box 3 takes full width (12 columns) below them. At large screens (≥992px), all three boxes take 4 columns each, fitting in one row equally.

❓ selector

advanced

CSS media query for xl breakpoint

Which CSS media query matches Bootstrap's xl breakpoint (≥1200px)?

A @media (min-width: 1200px) { /* styles */ }

B @media (max-width: 1200px) { /* styles */ }

C @media (min-width: 992px) and (max-width: 1199.98px) { /* styles */ }

D @media (min-width: 1400px) { /* styles */ }

💡 Hint

Bootstrap breakpoints use min-width for starting points.

The xl breakpoint starts at 1200px and up, so the correct media query uses min-width: 1200px.

❓ accessibility

expert

Accessibility considerations with breakpoint tiers

When using Bootstrap breakpoint tiers to hide content on smaller screens (e.g., using d-none d-md-block), what is an important accessibility consideration?

A Hidden content is removed from the accessibility tree and screen readers cannot access it.

B Hidden content remains visible to screen readers even if visually hidden.

C Using these classes automatically adds aria-hidden attributes for accessibility.

D Content hidden with these classes is still focusable by keyboard users.

💡 Hint

Think about how display:none affects screen readers.

Bootstrap's d-none applies display:none, which removes content from the accessibility tree, so screen readers cannot access it. This is important to consider when hiding content responsively.

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