Mixing column widths in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Bootstrap column width behavior

In Bootstrap's grid system, what happens if you mix fixed-width columns (like col-3) with auto-width columns (like col) inside the same row?

A Auto-width columns shrink to zero width and are not visible.

B All columns become fixed width based on the largest fixed-width column.

C The fixed-width columns keep their size, and the auto-width columns share the remaining space equally.

D The row breaks into multiple lines to fit all columns.

💡 Hint

Think about how Bootstrap distributes space when some columns have fixed sizes and others don't.

Bootstrap's grid allows mixing fixed-width columns (like col-3) with flexible columns (col). The fixed-width columns take their specified width, and the remaining space is divided equally among the flexible columns.

📝 Syntax

intermediate

Correct Bootstrap column class usage

Which option correctly creates a row with three columns where the first column is 4 units wide, the second column auto-adjusts, and the third column is 3 units wide?

Bootsrap

<div class="row">
  <!-- columns here -->
</div>

A <div class="col-3"></div><div class="col-4"></div><div class="col"></div>

B <div class="col-4"></div><div class="col"></div><div class="col-3"></div>

C <div class="col"></div><div class="col-4"></div><div class="col-3"></div>

D <div class="col-4"></div><div class="col-3"></div><div class="col"></div>

💡 Hint

Remember the order: first column 4 units, second auto, third 3 units.

The correct order is col-4, then col for auto width, then col-3. This matches the requirement exactly.

❓ rendering

advanced

Visual output of mixed column widths

What will you see in the browser when you use this Bootstrap code inside a container?

<div class="row">
  <div class="col-2 bg-primary text-white">A</div>
  <div class="col bg-success text-white">B</div>
  <div class="col-3 bg-danger text-white">C</div>
</div>

A A narrow blue box labeled 'A', a green box labeled 'B' filling leftover space, and a wider red box labeled 'C'.

B Three equal boxes labeled A, B, and C with equal widths and colors blue, green, and red.

C Boxes A and C stacked vertically with B filling the full width below them.

D Only boxes A and C appear side by side; box B is hidden.

💡 Hint

Look at the column classes and their widths.

The col-2 and col-3 columns have fixed widths. The col column fills the leftover space. Colors and labels help identify each box visually.

❓ selector

advanced

CSS selector for mixed Bootstrap columns

You want to style only the auto-width columns inside a Bootstrap row that also has fixed-width columns. Which CSS selector targets only the auto-width columns (with class col) inside a .row?

A .row > div:not(.col)

B .row > .col:not([class*='col-'])

C .row > [class^='col-']

D .row > .col

💡 Hint

Remember that auto-width columns have the class exactly 'col'.

The class col alone identifies auto-width columns. So .row > .col selects them directly. Option D tries to exclude fixed-width columns but is unnecessary because fixed-width columns do not have the col class; they use col-{n} classes like col-3.

❓ accessibility

expert

Ensuring accessibility with mixed column widths

You have a Bootstrap row with mixed column widths. What is the best practice to ensure screen readers understand the layout and content order correctly?

A Use semantic HTML elements inside columns and ensure logical DOM order matches visual order.

B Add <code>aria-hidden="true"</code> to fixed-width columns to skip them.

C Use <code>tabindex="-1"</code> on auto-width columns to prevent keyboard focus.

D Wrap all columns in a single <code>div</code> with <code>role="presentation"</code>.

💡 Hint

Think about how screen readers read content and the importance of semantic structure.

Using semantic HTML and keeping the DOM order logical ensures screen readers read content in the correct sequence. Hiding or removing focus from columns can confuse users. Role presentation removes meaning and should not be used for content containers.