Mixing column widths in Bootsrap - Mini Project: Build & Apply

Mixing Column Widths with Bootstrap Grid

📖 Scenario: You are creating a simple webpage layout using Bootstrap's grid system. You want to mix fixed-width columns with flexible columns to create a balanced design.

🎯 Goal: Build a responsive Bootstrap grid with three columns: the first column is fixed width (4 units), the second column is flexible (auto width), and the third column is fixed width (2 units). The columns should be inside a container and a row.

📋 What You'll Learn

Use Bootstrap 5 grid classes

Create a container with a row

Add three columns inside the row

First column uses col-4 for fixed width

Second column uses col for flexible width

Third column uses col-2 for fixed width

Include some placeholder text in each column

💡 Why This Matters

🌍 Real World

Web developers often need to create layouts that mix fixed and flexible widths to make pages look good on all devices.

💼 Career

Understanding Bootstrap grid helps you build responsive websites quickly, a key skill for front-end web development jobs.

1

Create the Bootstrap container and row

Write the HTML code to create a <div> with class container and inside it a <div> with class row.

Bootsrap

Need a hint?

Remember to use class="container" for the outer div and class="row" for the inner div.

2

Add the first fixed-width column

Inside the row div, add a div with class col-4 and put the text First column (4 units) inside it.

Bootsrap

  
    First column (4 units)
    
  

Need a hint?

Use class="col-4" to fix the column width to 4 units.

3

Add the flexible middle column

Add a second div inside the row with class col and text Second column (flexible).

Bootsrap

  
    First column (4 units)
    Second column (flexible)
    
  

Need a hint?

Use class="col" to make the column flexible and fill remaining space.

4

Add the third fixed-width column

Add a third div inside the row with class col-2 and text Third column (2 units).

Bootsrap

  
    First column (4 units)
    Second column (flexible)
    Third column (2 units)
  

Need a hint?

Use class="col-2" to fix the column width to 2 units.