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.

Practice

1. What does the Bootstrap class col-6 mean in a grid layout?

easy

A. The column takes up half the width of the row (6 out of 12 parts).

B. The column takes up 6 pixels width.

C. The column is hidden on screens smaller than 6 inches.

D. The column has 6 columns inside it.

Solution

1. Step 1: Understand Bootstrap grid system

   Bootstrap divides a row into 12 equal parts for layout.

2. Step 2: Interpret col-6

   The class col-6 means the column uses 6 of those 12 parts, which is half the row width.

3. Final Answer:

   The column takes up half the width of the row (6 out of 12 parts). -> Option A

4. Quick Check:

   col-6 means 6/12 width = half [OK]

Hint: Remember: col-# means # out of 12 parts width [OK]

Common Mistakes:

• Thinking col-6 means 6 pixels wide
• Confusing col-6 with number of columns inside
• Assuming col-6 hides the column on small screens

2. Which of the following is the correct way to create a column that takes one quarter of the row width using Bootstrap classes?

easy

A. col-3

B. col-4

C. col-6

D. col-9

Solution

1. Step 1: Calculate quarter width in 12 parts

   One quarter of 12 parts is 12 ÷ 4 = 3 parts.

2. Step 2: Match with Bootstrap class

   The class col-3 means 3 parts width, which is one quarter.

3. Final Answer:

   <code>col-3</code> -> Option A

4. Quick Check:

   3 parts = 1/4 width [OK]

Hint: Divide 12 by desired fraction to find col-# [OK]

Common Mistakes:

• Choosing col-4 which is one third, not quarter
• Confusing col-6 as quarter width
• Picking col-9 which is three quarters

3. Given this HTML snippet:

<div class='row'>
  <div class='col-4'>A</div>
  <div class='col-8'>B</div>
</div>

How will the columns appear on a large screen?

medium

A. Column A takes 4/12 width, Column B takes 8/12 width stacked vertically.

B. Column A and B stack vertically, each full width.

C. Column A takes 1/3 width, Column B takes 2/3 width side by side.

D. Column A takes 8/12 width, Column B takes 4/12 width side by side.

Solution

1. Step 1: Understand col-4 and col-8 widths

   col-4 means 4 parts out of 12 (1/3), col-8 means 8 parts out of 12 (2/3).

2. Step 2: Check layout behavior in Bootstrap

   Columns inside a row appear side by side if total is 12 or less.

3. Final Answer:

   Column A takes 1/3 width, Column B takes 2/3 width side by side. -> Option C

4. Quick Check:

   4 + 8 = 12 parts, side by side [OK]

Hint: Sum col-# classes; if 12 or less, columns sit side by side [OK]

Common Mistakes:

• Thinking columns stack vertically by default
• Mixing up col-4 and col-8 widths
• Assuming col-4 means 1/4 width

4. What is wrong with this Bootstrap column layout?

<div class='row'>
  <div class='col-5'>X</div>
  <div class='col-8'>Y</div>
</div>

medium

A. The classes col-5 and col-8 are invalid in Bootstrap.

B. The columns add up to more than 12, causing layout issues.

C. The columns will stack vertically because col-5 is less than col-6.

D. The row class is missing, so columns won't align.

Solution

1. Step 1: Add column widths

   col-5 means 5 parts, col-8 means 8 parts; total is 5 + 8 = 13 parts.

2. Step 2: Check Bootstrap grid rules

   Columns in a row should add up to 12 or less for proper layout; more than 12 breaks layout.

3. Final Answer:

   The columns add up to more than 12, causing layout issues. -> Option B

4. Quick Check:

   5 + 8 = 13 > 12 breaks layout [OK]

Hint: Sum col-# classes; must be ≤ 12 for correct layout [OK]

Common Mistakes:

• Thinking col-5 or col-8 are invalid classes
• Assuming columns stack because of size difference
• Ignoring total width exceeding 12

5. You want to create a responsive layout with three columns where:
- The first column is 3 parts wide
- The second column is twice as wide as the first
- The third column fills the remaining space
Which Bootstrap classes should you use?

hard

A. col-3, col-5, col-4

B. col-3, col-6, col-4

C. col-2, col-4, col-6

D. col-3, col-6, col-3

Solution

1. Step 1: Assign widths based on conditions

   First column = 3 parts; second column = twice first = 6 parts.

2. Step 2: Calculate remaining space for third column

   Total so far: 3 + 6 = 9 parts; remaining = 12 - 9 = 3 parts.

3. Step 3: Match with Bootstrap classes

   Use col-3, col-6, and col-3 for the three columns respectively.

4. Final Answer:

   <code>col-3</code>, <code>col-6</code>, <code>col-3</code> -> Option D

5. Quick Check:

   3 + 6 + 3 = 12 parts total [OK]

Hint: Double first col width, subtract sum from 12 for last [OK]

Common Mistakes:

• Choosing widths that sum over 12
• Not doubling the first column width correctly
• Assigning third column more than remaining space