Auto-sizing columns in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Bootstrap Auto-sizing Columns

In Bootstrap, what does the col-auto class do when applied to a column inside a .row?

A It sizes the column based on its content width, not filling the remaining space.

B It makes the column take up the entire width of the row.

C It fixes the column width to 100 pixels regardless of content.

D It hides the column on small screens.

💡 Hint

Think about how columns behave when you want them to fit their content exactly.

The col-auto class in Bootstrap sizes the column width automatically based on the content inside it. It does not stretch to fill the remaining space like col or col-* classes.

📝 Syntax

intermediate

Identify the Correct Bootstrap Auto-sizing Column Syntax

Which of the following HTML snippets correctly creates a Bootstrap row with one auto-sized column and one regular column that fills the rest of the space?

A

<div class="row">
  <div class="auto-col">Auto</div>
  <div class="fill-col">Fill</div>
</div>

B

<div class="row">
  <div class="col">Auto</div>
  <div class="col-auto">Fill</div>
</div>

C

<div class="row">
  <div class="col-auto-auto">Auto</div>
  <div class="col-fill">Fill</div>
</div>

D

<div class="row">
  <div class="col-auto">Auto</div>
  <div class="col">Fill</div>
</div>

💡 Hint

Remember the exact Bootstrap class names for auto and flexible columns.

Option D uses the correct Bootstrap classes: col-auto for auto-sized column and col for flexible column filling remaining space.

❓ rendering

advanced

Visual Result of Mixed Auto and Flexible Columns

What will you see in the browser when rendering this Bootstrap code?

<div class="row">
  <div class="col-auto bg-primary text-white p-2">Short</div>
  <div class="col bg-secondary text-white p-2">This column fills the rest of the row</div>
</div>

Bootsrap

<div class="row">
  <div class="col-auto bg-primary text-white p-2">Short</div>
  <div class="col bg-secondary text-white p-2">This column fills the rest of the row</div>
</div>

A Two equal width boxes side by side, both filling half the row.

B Only the gray box is visible filling the entire row; the blue box is hidden.

C A small blue box with 'Short' sized to content on left, and a larger gray box filling the rest of the row on right.

D One full-width blue box with 'Short' text, and the gray box below it filling the row.

💡 Hint

Remember how col-auto sizes to content and col fills remaining space.

The col-auto column sizes itself just enough for the 'Short' text with blue background. The col column fills the rest of the row with gray background.

❓ selector

advanced

CSS Selector for Auto-sized Bootstrap Columns

Which CSS selector correctly targets only the Bootstrap columns that are auto-sized with col-auto class inside a .row?

A .col-auto .row

B .row > .col-auto

C .row .col:not(.col-auto)

D .col-auto > .row

💡 Hint

Think about direct children with the class col-auto inside .row.

The selector .row > .col-auto selects all elements with class col-auto that are direct children of elements with class row.

❓ accessibility

expert

Improving Accessibility for Auto-sized Columns

You have a Bootstrap row with multiple col-auto columns containing buttons. What is the best way to improve keyboard navigation and screen reader accessibility for these auto-sized columns?

A Add <code>role="group"</code> to the row and use <code>aria-label</code> to describe the group of buttons.

B Add <code>tabindex="-1"</code> to all buttons to skip them in keyboard navigation.

C Remove all ARIA attributes and rely on default Bootstrap styles.

D Wrap each button in a <code>&lt;div&gt;</code> with no ARIA attributes.

💡 Hint

Grouping related interactive elements helps screen readers understand context.

Adding role="group" and an aria-label to the container groups the buttons semantically, improving screen reader context and keyboard navigation.