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.

Practice

1. What does the Bootstrap class col-md-6 do in a responsive layout?

easy

A. Makes the column take half the width on medium and larger screens

B. Makes the column take full width on all screen sizes

C. Makes the column hidden on medium screens

D. Makes the column take one-sixth width on medium screens

Solution

1. Step 1: Understand the class format

   The class col-md-6 means the column uses 6 parts out of 12 on medium (≥768px) screens and larger.

2. Step 2: Interpret the width fraction

   Since Bootstrap grid is divided into 12 parts, 6 parts equal half the width.

3. Final Answer:

   Makes the column take half the width on medium and larger screens -> Option A

4. Quick Check:

   col-md-6 = half width on medium+ [OK]

Hint: Remember 12-grid system: number means parts of 12 width [OK]

Common Mistakes:

• Thinking it applies to all screen sizes
• Confusing '6' with percentage instead of grid parts
• Assuming it hides the column

2. Which of the following is the correct Bootstrap class to make a column full width on small screens and half width on large screens?

easy

A. col-sm-12 col-lg-6

B. col-lg-12 col-sm-6

C. col-6 col-lg-12

D. col-sm-6 col-lg-12

Solution

1. Step 1: Understand screen size prefixes

   sm means small screens (≥576px), lg means large screens (≥992px).

2. Step 2: Match widths to screen sizes

   We want full width (12 parts) on small screens and half width (6 parts) on large screens, so col-sm-12 col-lg-6 fits.

3. Final Answer:

   col-sm-12 col-lg-6 -> Option A

4. Quick Check:

   Full width small + half large = col-sm-12 col-lg-6 [OK]

Hint: Use smaller breakpoint first, then larger breakpoint classes [OK]

Common Mistakes:

• Reversing the order of breakpoints
• Using wrong numbers for widths
• Mixing up screen size prefixes

3. Given the HTML snippet:

<div class="row">
  <div class="col-12 col-md-8">Content A</div>
  <div class="col-6 col-md-4">Content B</div>
</div>

What will be the layout on a medium screen (≥768px)?

medium

A. Content A and B both take full width stacked vertically

B. Content A takes full width, Content B takes half width stacked

C. Content A takes 8/12 width, Content B takes 4/12 width side by side

D. Content A takes 6/12 width, Content B takes 6/12 width side by side

Solution

1. Step 1: Identify classes active at medium screen

   At medium (≥768px), col-md-8 and col-md-4 apply, overriding smaller screen classes.

2. Step 2: Calculate widths

   Content A uses 8 parts out of 12, Content B uses 4 parts out of 12, so they sit side by side with those widths.

3. Final Answer:

   Content A takes 8/12 width, Content B takes 4/12 width side by side -> Option C

4. Quick Check:

   col-md-8 + col-md-4 = full row split 8/4 [OK]

Hint: At breakpoint, use col-{breakpoint}-X classes, ignore smaller ones [OK]

Common Mistakes:

• Using col-12 and col-6 widths instead of col-md-*
• Thinking columns stack vertically on medium screens
• Confusing which class overrides which

4. You wrote this code:

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

But on small screens, Box 3 drops to a new line instead of staying in the same row. Why?

medium

A. Because col-sm-6 means full width on small screens

B. Because col-md-4 overrides col-sm-6 on small screens

C. Because the row class is missing

D. Because three columns of col-sm-6 each exceed 12 grid units, causing wrap

Solution

1. Step 1: Calculate total width on small screens

   Each column uses col-sm-6, meaning 6 parts out of 12, so two columns fit per row (6+6=12).

2. Step 2: Understand why Box 3 wraps

   Three columns each 6 parts wide total 18 parts, which is more than 12, so Box 3 wraps to next line.

3. Final Answer:

   Because three columns of col-sm-6 each exceed 12 grid units, causing wrap -> Option D

4. Quick Check:

   6+6+6 > 12 causes wrap [OK]

Hint: Sum col widths per row; >12 means wrap to next line [OK]

Common Mistakes:

• Thinking col-md-4 affects small screens
• Assuming row class is missing
• Misunderstanding col-sm-6 width

5. You want a layout where on extra small screens all columns stack full width, on small screens two columns share the row equally, and on large screens three columns share the row equally. Which class set achieves this?

hard

A. col-6 col-sm-12 col-lg-4

B. col-12 col-sm-6 col-lg-4

C. col-sm-12 col-md-6 col-lg-4

D. col-12 col-md-4 col-lg-6

Solution

1. Step 1: Define widths for extra small screens

   col-12 makes columns full width on extra small screens (default).

2. Step 2: Define widths for small screens

   col-sm-6 makes two columns per row (6+6=12) on small screens.

3. Step 3: Define widths for large screens

   col-lg-4 makes three columns per row (4+4+4=12) on large screens.

4. Final Answer:

   col-12 col-sm-6 col-lg-4 -> Option B

5. Quick Check:

   Stack, then 2 per row, then 3 per row = col-12 col-sm-6 col-lg-4 [OK]

Hint: Start from smallest screen, add classes for bigger breakpoints [OK]

Common Mistakes:

• Mixing breakpoint order
• Using wrong numbers for equal columns
• Forgetting default col-12 for stacking