12-column grid model in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a row with two equal columns using Bootstrap's 12-column grid.

Bootsrap

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

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

A4

B6

C8

D12

Attempts:

3 left

💡 Hint

Common Mistakes

Using 4 or 8 which do not split the row equally.

Using 12 which makes one column full width.

Bootstrap's grid has 12 columns. To split a row into two equal parts, each column should span 6 columns.

2fill in blank

medium

Complete the code to create three equal columns in a Bootstrap row.

Bootsrap

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

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

A3

B12

C6

D4

Attempts:

3 left

💡 Hint

Common Mistakes

Using 3 which would only total 9 columns.

Using 6 which is half the row, too wide for three columns.

Three equal columns mean dividing 12 by 3, which is 4 columns each.

3fill in blank

hard

Fix the error in the code to make two columns where the first is 8 columns wide and the second fills the rest.

Bootsrap

<div class="row">
  <div class="col-[1]">Wide Column</div>
  <div class="col-4">Narrow Column</div>
</div>

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

A6

B7

C8

D5

Attempts:

3 left

💡 Hint

Common Mistakes

Using 6 which makes total columns 10, less than 12.

Using 7 which totals 11 columns, not filling the row.

The first column should be 8 columns wide to complement the second column's 4 columns, totaling 12.

4fill in blank

hard

Fill both blanks to create a row with one column taking 3 columns and another taking the remaining space.

Bootsrap

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

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

A3

B9

C8

D6

Attempts:

3 left

💡 Hint

Common Mistakes

Using 3 and 8 which totals 11 columns.

Using 6 and 6 which does not match the instruction.

The first column uses 3 columns, so the second must use 9 to total 12 columns.

5fill in blank

hard

Fill all three blanks to create a row with three columns sized 2, 5, and the remaining columns respectively.

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>

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

A2

B5

D4

Attempts:

3 left

💡 Hint

Common Mistakes

Using 2, 5, and 4 which totals 11 columns.

Miscalculating the remaining space as 4 instead of 5.

The first column is 2, the second is 5, so the third is 12 - 2 - 5 = 5 columns.