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.