Responsive column classes in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Bootstrap Responsive Column Classes

In Bootstrap, which class would you use to make a column take up half the width on medium screens and above, but full width on smaller screens?

A col-6

B col-md-6

C col-sm-6

D col-lg-6

💡 Hint

Think about the breakpoint that starts at medium screen size.

The class col-md-6 makes the column take half the width starting at medium screens (≥768px). On smaller screens, it defaults to full width.

📝 Syntax

intermediate

Correct Bootstrap Column Class Syntax

Which of the following is the correct way to specify a column that is 4 units wide on large screens and 12 units wide on extra small screens?

A col-4 col-lg-12

B col-12 col-lg-4

C col-lg-4 col-xs-12

D col-lg-4 col-12

💡 Hint

Remember that col- without breakpoint means extra small screens.

col-lg-4 sets width to 4 units on large screens and above, col-12 sets full width on extra small screens.

❓ rendering

advanced

Visual Output of Responsive Columns

Given this HTML snippet:

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

What will the layout look like on a medium screen (≥768px and <992px)?

A Two rows with two boxes each, each box half width

B One row with four boxes, each quarter width

C Four rows with one box each, full width

D One row with two boxes, each half width

💡 Hint

Check which breakpoint applies at medium screen size.

At medium screens, col-sm-6 applies, so each box is half width. Four boxes create two rows with two boxes each.

❓ selector

advanced

Choosing the Right Responsive Class

You want a column to be full width on extra small and small screens, half width on medium screens, and one-third width on large screens and above. Which class combination achieves this?

A col-12 col-md-6 col-lg-4

B col-6 col-md-12 col-lg-4

C col-sm-12 col-md-6 col-lg-3

D col-12 col-sm-6 col-lg-4

💡 Hint

Remember that col- applies to extra small screens.

col-12 sets full width on extra small, col-md-6 half width on medium, and col-lg-4 one-third width on large screens.

❓ accessibility

expert

Accessibility Considerations with Responsive Columns

When using Bootstrap responsive columns, what is the best practice to ensure screen readers understand the layout order on all screen sizes?

A Use JavaScript to rearrange DOM elements based on screen size

B Use <code>aria-label</code> on each column to describe its content

C Use Bootstrap's order classes to control visual order and keep DOM order logical

D Add tabindex="-1" to all columns to skip them in tab order

💡 Hint

Think about how visual order and DOM order affect screen readers.

Using Bootstrap's order classes changes visual order without changing DOM order, preserving logical reading order for screen readers.