Nesting rows and columns in Bootsrap - Mini Project: Build & Apply

Nesting Rows and Columns with Bootstrap

📖 Scenario: You are building a simple webpage layout using Bootstrap. You want to create a section where a row contains two columns, and inside the first column, you want to nest another row with two smaller columns. This helps organize content clearly and responsively.

🎯 Goal: Create a Bootstrap layout with a main row containing two columns. Inside the first column, nest another row with two columns. Use Bootstrap classes correctly to ensure the layout is responsive and structured.

📋 What You'll Learn

Use a <div> with class container as the main wrapper.

Create a main <div> with class row inside the container.

Inside the main row, create two columns with class col-6 each.

Nest a row inside the first col-6 column.

Inside the nested row, create two columns with class col-6 each.

Add simple text inside each column to identify them (e.g., 'Main Col 1', 'Nested Col 1').

Use semantic HTML and Bootstrap 5 classes.

Ensure the code is valid HTML5 with proper structure and indentation.

💡 Why This Matters

🌍 Real World

Nesting rows and columns is common in real websites to create complex layouts like dashboards, product pages, or forms with multiple sections.

💼 Career

Understanding Bootstrap's grid system and nesting helps front-end developers build responsive and organized web pages efficiently.

1

Create the main container and row

Create a <div> with class container. Inside it, create a <div> with class row. This sets up the main layout structure.

Bootsrap

Need a hint?

Remember, the container holds the row, which holds columns.

2

Add two main columns inside the row

Inside the row, add two <div> elements with class col-6 each. These are the two main columns side by side.

Bootsrap

Need a hint?

Use col-6 to split the row into two equal columns.

3

Nest a row with two columns inside the first main column

Inside the first col-6 column, add a nested <div> with class row. Inside this nested row, add two columns with class col-6 each.

Bootsrap

Need a hint?

Remember to nest the row inside the first column, then add two columns inside that nested row.

4

Add text labels inside all columns

Add the text Main Col 1 inside the first main column, Main Col 2 inside the second main column. Inside the nested columns, add Nested Col 1 and Nested Col 2 respectively.

Bootsrap

Need a hint?

Place the text inside the correct columns to identify them visually.