Column sizing (col-1 through col-12) in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Bootstrap column that takes up 4 parts of the grid.

Bootsrap

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

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

A4

B6

C12

D3

Attempts:

3 left

💡 Hint

Common Mistakes

Using a number larger than 12.

Forgetting to add the 'col-' prefix.

The class col-4 makes the column take 4 parts of the 12-part grid.

2fill in blank

medium

Complete the code to create a row with two columns: one 8 parts wide and the other 4 parts wide.

Bootsrap

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

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

A6

B8

C4

D3

Attempts:

3 left

💡 Hint

Common Mistakes

Using column sizes that do not add up to 12.

Swapping the sizes between columns.

The first column uses col-8 and the second uses col-4 to fill the 12-part grid.

3fill in blank

hard

Fix the error in the code to make the column take up half the row width.

Bootsrap

<div class="row">
  <div class="col-[1]">Half width</div>
</div>

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

A6

B5

C7

D8

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a number not equal to half of 12.

Using numbers greater than 12.

Using col-6 makes the column take half of the 12-part grid.

4fill in blank

hard

Fill both blanks to create three equal columns in a row.

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'

A4

B3

C6

D5

Attempts:

3 left

💡 Hint

Common Mistakes

Using different sizes for columns.

Choosing numbers that do not add up to 12.

Using col-4 for each column divides the row into three equal parts (4 + 4 + 4 = 12).

5fill in blank

hard

Fill all three blanks to create a layout with a 3-part column, a 6-part column, and a 3-part column.

Bootsrap

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

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

A4

B6

C3

D5

Attempts:

3 left

💡 Hint

Common Mistakes

Using sizes that do not add up to 12.

Using the same size for all columns.

The columns use col-3, col-6, and col-3 to fill the 12-part grid evenly.