Auto-sizing columns in Bootsrap - Mini Project: Build & Apply

Auto-sizing Columns with Bootstrap

📖 Scenario: You are creating a simple webpage layout using Bootstrap. You want to arrange three columns in a row where the first and third columns have fixed widths, and the middle column automatically adjusts its width to fill the remaining space.

🎯 Goal: Build a responsive Bootstrap row with three columns. The first column should have a fixed width of 100 pixels, the third column a fixed width of 150 pixels, and the middle column should auto-size to fill the remaining horizontal space.

📋 What You'll Learn

Use Bootstrap 5 classes for layout

Create a container with a row

Add three columns inside the row

Set fixed widths for the first and third columns using inline styles

Make the middle column auto-size to fill remaining space

Ensure the layout is responsive and accessible

💡 Why This Matters

🌍 Real World

Web developers often need to create layouts where some parts have fixed sizes and others fill the remaining space. This skill helps build flexible, user-friendly interfaces.

💼 Career

Understanding Bootstrap's grid and utility classes is essential for front-end developers to create responsive and accessible web pages quickly.

1

Create the basic Bootstrap container and row

Write the HTML skeleton for a Bootstrap container with a div that has the class row. Inside the row, add three empty div elements with the class col each. This sets up the three columns.

Bootsrap

Hint

Remember to use the Bootstrap classes container, row, and col to create the grid layout.

2

Set fixed widths for the first and third columns

Add inline styles to the first div with class col to set its width to 100px. Also add inline styles to the third div with class col to set its width to 150px.

Bootsrap

  
  
  Auto-sizing Columns
  


  
    
      
      
      
    
  

Hint

Use the style attribute inside the first and third div with class col to set fixed widths.

3

Make the middle column auto-size to fill remaining space

Add the Bootstrap class flex-grow-1 to the middle div with class col so it automatically grows to fill the leftover space between the fixed-width columns.

Bootsrap

  
  
  Auto-sizing Columns
  


  
    
      
      
      
    
  

Hint

Add the Bootstrap utility class flex-grow-1 to the middle column's div to make it expand.

4

Add content and accessibility labels to columns

Add descriptive text inside each column's div: "Fixed 100px" in the first, "Auto-sized" in the middle, and "Fixed 150px" in the third. Also add aria-label attributes to each column div describing their widths for screen readers.

Bootsrap

  
  
  Auto-sizing Columns
  


  
    
      Fixed 100px
      Auto-sized
      Fixed 150px
    
  

Hint

Put the text inside each column's div and add aria-label attributes describing their widths for screen readers.

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