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.