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

Need a 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
  


  
    
      
      
      
    
  

Need a 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
  


  
    
      
      
      
    
  

Need a 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
    
  

Need a hint?

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