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).

Practice

1. What does the class col-6 mean in Bootstrap's grid system?

easy

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

B. The column takes up 6 pixels width.

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

D. The column is fixed to 6 rem units wide.

Solution

1. Step 1: Understand Bootstrap grid basics

   Bootstrap divides a row into 12 equal parts for layout.

2. Step 2: Interpret col-6 meaning

   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 row width (6 out of 12 parts). -> Option C

4. Quick Check:

   12 parts total, 6 parts used = half width [OK]

Hint: Remember: col-6 means 6/12 width, or half the row [OK]

Common Mistakes:

• Thinking col-6 means 6 pixels wide
• Confusing col-6 with fixed width units
• Assuming col-6 hides the column

2. Which of the following is the correct way to make a column take 4 parts on medium screens and 12 parts on small screens?

easy

A. <div class='col-12 col-md-4'></div>

B. <div class='col-lg-4 col-12'></div>

C. <div class='col-4 col-md-12'></div>

D. <div class='col-md-12 col-4'></div>

Solution

1. Step 1: Understand responsive classes order

   Bootstrap applies classes from smallest to largest screen sizes. The class without breakpoint applies to all sizes unless overridden.

2. Step 2: Choose correct class order

   To have 12 parts on small screens and 4 parts on medium and up, use col-12 for small and col-md-4 for medium screens.

3. Final Answer:

   <div class='col-12 col-md-4'></div> -> Option A

4. Quick Check:

   Small = col-12, Medium = col-md-4 [OK]

Hint: Put smaller screen class first, then medium with breakpoint [OK]

Common Mistakes:

• Reversing the order of classes
• Using wrong breakpoint prefixes
• Assuming col-4 applies to small screens

3. Given this HTML snippet:

<div class='row'>
  <div class='col-3'>A</div>
  <div class='col-6'>B</div>
  <div class='col-3'>C</div>
</div>

How will the columns appear on a large screen?

medium

A. Three columns stacked vertically, each full width

B. Three columns: A (25%), B (50%), C (25%) width in one row

C. Two columns: A and B share one row, C on next row

D. Columns A and C are hidden, only B shows

Solution

1. Step 1: Add column widths

   Columns have classes col-3, col-6, and col-3, which add up to 3+6+3=12 parts.

2. Step 2: Understand layout on large screens

   Since total is 12, all columns fit in one row side by side with widths 25%, 50%, and 25% respectively.

3. Final Answer:

   Three columns: A (25%), B (50%), C (25%) width in one row -> Option B

4. Quick Check:

   3+6+3=12 parts, fits in one row [OK]

Hint: Sum col-* numbers; if 12, columns share one row [OK]

Common Mistakes:

• Thinking columns stack vertically by default
• Assuming columns overflow to next row
• Confusing col-3 with 3 pixels

4. Identify the error in this Bootstrap code:

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

medium

A. The total column width exceeds 12, causing layout issues.

B. The class names should be col-6 and col-6 instead.

C. The row class is missing a container wrapper.

D. The columns need to use col-md-* classes instead.

Solution

1. Step 1: Calculate total column width

   Adding col-5 and col-8 gives 5 + 8 = 13, which is more than 12.

2. Step 2: Understand Bootstrap grid limits

   Bootstrap rows can only hold 12 parts per row. Exceeding 12 causes the second column to wrap or break layout.

3. Final Answer:

   The total column width exceeds 12, causing layout issues. -> Option A

4. Quick Check:

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

Hint: Sum col-* numbers; must not exceed 12 per row [OK]

Common Mistakes:

• Ignoring total width exceeding 12
• Thinking col-5 and col-8 fit in one row
• Assuming container is mandatory for row

5. You want a layout with three columns on large screens: left column 3 parts, middle column 6 parts, right column 3 parts. On small screens, all columns should stack full width. Which Bootstrap classes achieve this?

hard

A. <div class='col-3 col-lg-12'> for left and right, <div class='col-6 col-lg-12'> for middle

B. <div class='col-xl-3 col-12'> for left and right, <div class='col-xl-6 col-12'> for middle

C. <div class='col-lg-12 col-3'> for left and right, <div class='col-lg-12 col-6'> for middle

D. <div class='col-12 col-lg-3'> for left and right, <div class='col-12 col-lg-6'> for middle

Solution

1. Step 1: Define small screen behavior

   On small screens, columns stack full width, so use col-12 for all columns.

2. Step 2: Define large screen behavior

   On large screens, left and right columns take 3 parts (col-lg-3), middle takes 6 parts (col-lg-6).

3. Step 3: Combine classes correctly

   Use col-12 col-lg-3 for left and right, and col-12 col-lg-6 for middle to apply small screen first, then large screen overrides.

4. Final Answer:

   <div class='col-12 col-lg-3'> for left and right, <div class='col-12 col-lg-6'> for middle -> Option D

5. Quick Check:

   Small = col-12, Large = col-lg-3 or col-lg-6 [OK]

Hint: Write small screen class first, then large screen class [OK]

Common Mistakes:

• Reversing class order causing wrong widths
• Using col-3 for small screens instead of col-12
• Mixing breakpoint prefixes incorrectly