Responsive column classes in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a column that takes full width on small screens.

Bootsrap

<div class="container">
  <div class="row">
    <div class="col-[1]">
      Content here
    </div>
  </div>
</div>

Drag options to blanks, or click blank then click option'

A4

B6

C12

D3

Attempts:

3 left

💡 Hint

Common Mistakes

Using a smaller number like 6 or 4 will make the column take less than full width.

Forgetting to specify the breakpoint means it applies to all screen sizes.

The class col-12 makes the column take the full width on extra small and small screens.

2fill in blank

medium

Complete the code to make a column that is half width on medium screens.

Bootsrap

<div class="container">
  <div class="row">
    <div class="col-[1]-6">
      Content here
    </div>
  </div>
</div>

Drag options to blanks, or click blank then click option'

Alg

Bmd

Csm

Dxl

Attempts:

3 left

💡 Hint

Common Mistakes

Using sm targets smaller screens than medium.

Using lg or xl targets larger screens than medium.

The class col-md-6 makes the column take half the width on medium screens and larger.

3fill in blank

hard

Fix the error in the class to make the column take one third width on large screens.

Bootsrap

<div class="container">
  <div class="row">
    <div class="col-[1]-4">
      Content here
    </div>
  </div>
</div>

Drag options to blanks, or click blank then click option'

Alg

Bmd

Csm

Dxl

Attempts:

3 left

💡 Hint

Common Mistakes

Using md targets medium screens, not large.

Using xl targets extra large screens, which is larger than large.

The class col-lg-4 makes the column take one third width on large screens (≥992px).

4fill in blank

hard

Fill both blanks to create a column that is full width on small screens and one quarter width on extra large screens.

Bootsrap

<div class="container">
  <div class="row">
    <div class="col-[1] col-[2]-3">
      Content here
    </div>
  </div>
</div>

Drag options to blanks, or click blank then click option'

A12

Bxl

Csm

Dlg

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up breakpoints like using sm instead of xl for the large screen size.

Using smaller column numbers for full width instead of 12.

col-12 makes the column full width on extra small and small screens.
col-xl-3 makes it one quarter width on extra large screens.

5fill in blank

hard

Fill all three blanks to create a responsive layout: full width on extra small, half width on medium, and one third width on large screens.

Bootsrap

<div class="container">
  <div class="row">
    <div class="col-[1] col-[2]-6 col-[3]-4">
      Content here
    </div>
  </div>
</div>

Drag options to blanks, or click blank then click option'

A12

Bmd

Clg

Dsm

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong breakpoint names or numbers for the columns.

Not ordering classes properly can cause unexpected layout.

col-12 makes the column full width on extra small screens.
col-md-6 makes it half width on medium screens.
col-lg-4 makes it one third width on large screens.

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