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.