Mixing column widths in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Bootstrap row with two columns where the first column takes 8 parts of the width.

Bootsrap

<div class="row">
  <div class="col-[1]">First column</div>
  <div class="col-4">Second column</div>
</div>

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

A6

B12

C8

D4

Attempts:

3 left

💡 Hint

Common Mistakes

Using col-6 which would make columns not add up to 12.

Using col-12 which would make the first column full width.

The first column should use col-8 to take 8 parts of the 12-part grid.

2fill in blank

medium

Complete the code to create a Bootstrap row with three columns where the middle column is 6 parts wide.

Bootsrap

<div class="row">
  <div class="col-3">Left</div>
  <div class="col-[1]">Center</div>
  <div class="col-3">Right</div>
</div>

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

A6

B4

C5

D8

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing 4 or 5 which would not add up to 12 with the other columns.

Choosing 8 which would make total more than 12.

The middle column should be col-6 so the total adds to 12 (3 + 6 + 3).

3fill in blank

hard

Fix the error in the code to make the columns add up to 12 parts in the row.

Bootsrap

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

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

A5

B6

C8

D7

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing 6 or 8 which would not add up to 12 with 5.

Choosing 5 which duplicates the first column width.

The columns must add up to 12. Since the first is 5, the second should be 7.

4fill in blank

hard

Fill both blanks to create a row with three columns where the first is 3 parts and the last is 5 parts wide.

Bootsrap

<div class="row">
  <div class="col-[1]">First</div>
  <div class="col-[2]">Second</div>
  <div class="col-5">Third</div>
</div>

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

A3

B4

C6

D7

Attempts:

3 left

💡 Hint

Common Mistakes

Using 6 or 7 for the middle column which makes total more than 12.

Using 3 for the middle column which duplicates the first column.

The first column is 3, the last is 5, so the middle must be 4 to total 12 (3 + 4 + 5).

5fill in blank

hard

Fill all three blanks to create a row with four columns where the first is 2 parts, the second is 3 parts, and the last is 4 parts wide.

Bootsrap

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

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

A2

B3

D5

Attempts:

3 left

💡 Hint

Common Mistakes

Using 5 for the third column which makes total more than 12.

Using 2 or 3 for the third column incorrectly.

The first column is 2, second is 3, last is 4, so the third must be 3 to total 12 (2 + 3 + 3 + 4).