Column stacking on mobile in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make two columns stack vertically on small screens.

Bootsrap

<div class="row">
  <div class="col-[1]">Column 1</div>
  <div class="col-[1]">Column 2</div>
</div>

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

A4

B12

C6

D3

Attempts:

3 left

💡 Hint

Common Mistakes

Using col-6 will place columns side by side on small screens.

Not specifying column size causes unpredictable layout.

Using col-12 makes each column take full width on small screens, stacking them vertically.

2fill in blank

medium

Complete the code to make columns side by side on medium screens but stacked on small screens.

Bootsrap

<div class="row">
  <div class="col-12 col-[1]-6">Column 1</div>
  <div class="col-12 col-[1]-6">Column 2</div>
</div>

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

Amd

Bsm

Cxl

Dlg

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'sm' will make columns side by side on small screens, not stack.

For stacking on small screens, use col-12 without breakpoint.

Using col-12 stacks columns on small screens, and col-md-6 makes them side by side on medium screens and larger.

3fill in blank

hard

Fix the error in the class to stack columns on mobile but keep them side by side on large screens.

Bootsrap

<div class="row">
  <div class="col-lg-[1] col-12">Column 1</div>
  <div class="col-lg-[1] col-12">Column 2</div>
</div>

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

A12

B3

C6

D4

Attempts:

3 left

💡 Hint

Common Mistakes

Using col-lg-12 makes columns full width even on large screens.

Not including col-12 causes columns to stay side by side on small screens.

Using col-lg-6 makes columns side by side on large screens, and col-12 stacks them on smaller screens.

4fill in blank

hard

Fill both blanks to create three columns that stack on small screens and are side by side on medium screens.

Bootsrap

<div class="row">
  <div class="col-[1] col-[2]-4">Column 1</div>
  <div class="col-[1] col-[2]-4">Column 2</div>
  <div class="col-[1] col-[2]-4">Column 3</div>
</div>

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

A12

Bmd

Csm

D6

Attempts:

3 left

💡 Hint

Common Mistakes

Using col-sm-4 instead of col-md-4 makes columns side by side on small screens.

Using col-6 stacks only two columns per row, not three.

col-12 stacks columns on small screens, and col-md-4 makes three equal columns side by side on medium screens and larger.

5fill in blank

hard

Fill all three blanks to create a responsive layout with two columns: stacked on extra small, side by side on medium, and one column on large screens.

Bootsrap

<div class="row">
  <div class="col-[1] col-[2]-6 col-[3]-12">Column 1</div>
  <div class="col-[1] col-[2]-6 col-[3]-12">Column 2</div>
</div>

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

A12

Bmd

Clg

Dsm

Attempts:

3 left

💡 Hint

Common Mistakes

Using col-sm instead of col-md for medium screens.

Not including col-12 causes columns to stay side by side on small screens.

col-12 stacks columns on extra small screens, col-md-6 places them side by side on medium screens, and col-lg-12 stacks them again on large screens.