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.

Practice

1. What does the Bootstrap class col-auto do in a grid layout?

easy

A. It sizes the column to fit its content width automatically.

B. It makes the column take up the full width of the container.

C. It hides the column on small screens.

D. It fixes the column width to 100 pixels.

Solution

1. Step 1: Understand col-auto purpose

   The col-auto class sizes the column based on its content width, not stretching it.

2. Step 2: Compare with other column classes

   Unlike col which fills available space, col-auto fits tightly around content.

3. Final Answer:

   It sizes the column to fit its content width automatically. -> Option A

4. Quick Check:

   col-auto = auto width fitting content [OK]

Hint: Remember: col-auto fits content width exactly [OK]

Common Mistakes:

• Thinking col-auto fills full container width
• Confusing col-auto with fixed pixel width
• Assuming it hides columns on small screens

2. Which of the following is the correct syntax to create an auto-sizing column in Bootstrap?

easy

A. <div class='auto-col'>Content</div>

B. <div class='column-auto'>Content</div>

C. <div class='col-auto-size'>Content</div>

D. <div class='col-auto'>Content</div>

Solution

1. Step 1: Recall Bootstrap column class naming

   Bootstrap uses col-auto exactly to auto-size columns.

2. Step 2: Check each option for correct class

   Only <div class='col-auto'>Content</div> uses the correct class col-auto with proper syntax.

3. Final Answer:

   <div class='col-auto'>Content</div> -> Option D

4. Quick Check:

   Correct class name = col-auto [OK]

Hint: Use exact class col-auto for auto-sizing columns [OK]

Common Mistakes:

• Using incorrect class names like auto-col
• Adding extra suffixes like -size
• Mixing words in wrong order like column-auto

3. Given this Bootstrap code snippet, what will be the width behavior of the columns?

<div class='row'>
  <div class='col-auto'>Logo</div>
  <div class='col'>Main content</div>
</div>

medium

A. The 'Logo' column will fit its content width; 'Main content' fills remaining space.

B. Both columns will have equal width regardless of content.

C. 'Logo' column will fill full row width; 'Main content' will be hidden.

D. 'Main content' column will shrink to fit content; 'Logo' fills remaining space.

Solution

1. Step 1: Understand col-auto effect on 'Logo'

   The 'Logo' column uses col-auto, so it sizes exactly to the width of 'Logo' text.

2. Step 2: Understand col effect on 'Main content'

   The 'Main content' column uses col, which fills all remaining horizontal space.

3. Final Answer:

   The 'Logo' column will fit its content width; 'Main content' fills remaining space. -> Option A

4. Quick Check:

   col-auto fits content, col fills leftover [OK]

Hint: col-auto fits content; col fills rest [OK]

Common Mistakes:

• Assuming both columns have equal width
• Thinking col-auto fills full row
• Believing col shrinks to content

4. You wrote this Bootstrap code but the auto-sizing column is not shrinking to fit content:

<div class='row'>
  <div class='col'>Menu</div>
  <div class='col-auto'>Search</div>
</div>

What is the likely mistake?

medium

A. The col-auto class is applied to the wrong column; it should be on 'Menu'.

B. The row class is missing from the container.

C. The col-auto class is correct; no mistake in code.

D. The col-auto class is correct but the container needs d-flex.

Solution

1. Step 1: Check class usage on columns

   The 'Search' column has col-auto, so it will auto-size to content width as expected.

2. Step 2: Verify container and row classes

   The container has row class, which is correct for Bootstrap grid layout.

3. Final Answer:

   The col-auto class is correct; no mistake in code. -> Option C

4. Quick Check:

   Correct use of col-auto and row [OK]

Hint: Check if col-auto is on correct column and row exists [OK]

Common Mistakes:

• Thinking col-auto must be on first column
• Forgetting row class on container
• Adding unnecessary d-flex for grid columns

5. You want a Bootstrap row with three columns: the first and third columns auto-size to their content, and the middle column fills the remaining space. Which code snippet achieves this?

hard

A. <div class='row'>
<div class='col'>Left</div>
<div class='col-auto'>Center</div>
<div class='col'>Right</div>
</div>

B. <div class='row'>
<div class='col-auto'>Left</div>
<div class='col'>Center</div>
<div class='col-auto'>Right</div>
</div>

C. <div class='row'>
<div class='col'>Left</div>
<div class='col'>Center</div>
<div class='col-auto'>Right</div>
</div>

D. <div class='row'>
<div class='col-auto'>Left</div>
<div class='col-auto'>Center</div>
<div class='col-auto'>Right</div>
</div>

Solution

1. Step 1: Identify columns that auto-size

   The first and third columns should have col-auto to fit their content width.

2. Step 2: Identify column that fills remaining space

   The middle column should have col to fill leftover horizontal space.

3. Step 3: Match code snippet to requirements

   <div class='row'> <div class='col-auto'>Left</div> <div class='col'>Center</div> <div class='col-auto'>Right</div> </div> matches this exactly: first and third columns use col-auto, middle uses col.

4. Final Answer:

   <div class='row'> <div class='col-auto'>Left</div> <div class='col'>Center</div> <div class='col-auto'>Right</div> </div> -> Option B

5. Quick Check:

   Auto-size sides + flexible center = <div class='row'> <div class='col-auto'>Left</div> <div class='col'>Center</div> <div class='col-auto'>Right</div> </div> [OK]

Hint: Use col-auto for sides, col for center [OK]

Common Mistakes:

• Putting col-auto on center column
• Using col on side columns
• Making all columns col-auto causing no flexible space