Equal-width columns in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ layout

intermediate

What is the output of this Bootstrap grid code?

Consider this Bootstrap 5 code snippet:

<div class="container">
  <div class="row">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
    <div class="col">Column 3</div>
  </div>
</div>

How will the columns be displayed on a large screen?

Bootsrap

<div class="container">
  <div class="row">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
    <div class="col">Column 3</div>
  </div>
</div>

A Three columns of equal width side by side in one row

B Three columns stacked vertically, each full width

C First column twice as wide as the other two

D Columns with widths based on content size

💡 Hint

Remember, col without a number means equal width columns.

Using col class without a number divides the row into equal parts for each column.

❓ selector

intermediate

Which Bootstrap class creates equal-width columns?

Which class should you use to make columns automatically share equal width in a row?

A col-sm-6

B col-12

C col-auto

D col

💡 Hint

Look for the class that does not specify a fixed width.

The col class makes columns share equal width automatically.

❓ rendering

advanced

What happens if you mix col and col-6 in the same row?

Given this code:

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

How will the columns be sized on a large screen?

Bootsrap

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

A B takes full width, A and C stack below

B All three columns have equal width

C A and C share remaining space equally, B takes half the row width

D A takes 6 columns, B and C share remaining space

💡 Hint

Remember fixed width columns take specified space, others share leftover.

col-6 takes half the row width. The other two col share the remaining half equally.

❓ accessibility

advanced

How to make equal-width columns accessible for screen readers?

You have equal-width columns using Bootstrap. What should you add to improve accessibility?

A No accessibility attributes are needed for columns

B Add <code>aria-label</code> describing each column's content

C Add <code>tabindex="-1"</code> to columns

D Use <code>role="presentation"</code> on columns

💡 Hint

Think about how screen readers understand sections.

Adding aria-label helps screen readers describe the purpose of each column.

🧠 Conceptual

expert

Why does using only col classes create equal-width columns regardless of content?

Explain why Bootstrap's col class automatically makes columns equal width even if their content sizes differ.

A Because <code>col</code> uses flexbox with <code>flex: 1 0 0%</code> making all columns grow equally

B Because <code>col</code> sets fixed pixel widths for all columns

C Because <code>col</code> uses table layout forcing equal widths

D Because <code>col</code> hides overflow content to equalize widths

💡 Hint

Think about how flexbox distributes space among items.

The col class applies flexbox with equal flex-grow, so columns share available space equally regardless of content size.

Practice

1. What does using class="col" inside a row in Bootstrap do?

easy

A. Creates columns with fixed pixel widths

B. Creates columns that are always stacked vertically

C. Creates columns that share the row's width equally

D. Creates columns that ignore the row container

Solution

1. Step 1: Understand Bootstrap's grid system

   Bootstrap uses rows and columns to create layouts. The col class means the column will share space equally with other col siblings.

2. Step 2: Effect of col inside a row

   When multiple col classes are inside a row, they automatically divide the row's width evenly.

3. Final Answer:

   Creates columns that share the row's width equally -> Option C

4. Quick Check:

   Equal-width columns = col inside row [OK]

Hint: Remember: col means equal width columns [OK]

Common Mistakes:

• Thinking col sets fixed pixel widths
• Assuming columns always stack vertically
• Believing columns ignore the row container

2. Which of the following is the correct syntax to create three equal-width columns in Bootstrap?

easy

A.

B.

C.

D.

Solution

1. Step 1: Identify the container for columns

   Bootstrap columns must be inside a row to work properly.

2. Step 2: Check column classes for equal width

   Using col without a number creates equal-width columns automatically.

3. Final Answer:

   <div class="row"><div class="col"></div><div class="col"></div><div class="col"></div></div> -> Option A

4. Quick Check:

   Equal-width columns need col inside row [OK]

Hint: Use col inside row for equal widths [OK]

Common Mistakes:

• Using col outside a row
• Using fixed width classes like col-4 for equal widths
• Not wrapping columns in a row

3. What will be the visual result of this code?

<div class="row">
  <div class="col">A</div>
  <div class="col">B</div>
  <div class="col">C</div>
</div>

medium

A. Three columns with different widths depending on content

B. Three stacked rows labeled A, B, and C

C. One column with A, B, and C stacked vertically

D. Three columns of equal width side by side labeled A, B, and C

Solution

1. Step 1: Analyze the use of col classes inside row

   Each col inside a row creates a column that shares the row's width equally.

2. Step 2: Predict the layout

   The three columns labeled A, B, and C will appear side by side with equal widths.

3. Final Answer:

   Three columns of equal width side by side labeled A, B, and C -> Option D

4. Quick Check:

   Equal-width columns render side by side [OK]

Hint: Equal col inside row means side-by-side equal columns [OK]

Common Mistakes:

• Thinking columns stack vertically by default
• Assuming columns size by content width
• Confusing col with fixed width classes

4. Identify the error in this Bootstrap code for equal-width columns:

<div class="container">
  <div class="col">One</div>
  <div class="col">Two</div>
</div>

medium

A. Missing row container around the columns

B. Using container instead of row

C. Columns should have fixed width classes like col-6

D. No error, code is correct

Solution

1. Step 1: Check Bootstrap structure rules

   Columns (col) must be inside a row to work properly.

2. Step 2: Identify missing row

   The code has container but no row wrapping the columns, so columns won't behave as expected.

3. Final Answer:

   Missing row container around the columns -> Option A

4. Quick Check:

   Columns need row wrapper [OK]

Hint: Always wrap col inside row [OK]

Common Mistakes:

• Skipping the row wrapper
• Confusing container with row
• Thinking fixed width classes are required for equal columns

5. You want to create four equal-width columns that stack vertically on small screens but appear side by side on medium and larger screens. Which Bootstrap classes should you use?

hard

A. col inside a container

B. col-md inside a row

C. col-sm inside a row

D. col-lg inside a container

Solution

1. Step 1: Understand responsive column classes

   Bootstrap uses breakpoint prefixes like col-md to apply column widths starting at medium screen sizes.

2. Step 2: Choose classes for stacking on small and equal width on medium+

   Using col-md inside a row means columns stack vertically on small screens and become equal-width side by side on medium and larger screens.

3. Final Answer:

   col-md inside a row -> Option B

4. Quick Check:

   Use col-md for medium+ equal columns, stack below [OK]

Hint: Use breakpoint classes like col-md for responsive equal columns [OK]

Common Mistakes:

• Using col without breakpoint for responsive stacking
• Not wrapping columns in a row
• Using container instead of row for columns