Lesson 4: Bootstrap Grid System Overview

📌 Objective: Understand Bootstrap’s 12-column grid system and how to create responsive layouts.

---

🔹 1. What is the Bootstrap Grid System?

The Bootstrap grid system is a mobile-first, flexible layout system based on a 12-column structure. It allows developers to create responsive websites that adjust to different screen sizes.

✅ Why use the Bootstrap Grid System?
✔️ No need for complex CSS – predefined classes handle layout.
✔️ Mobile-first approach – Adjusts layout based on screen size.
✔️ Works with Flexbox – Automatic alignment and spacing.

💡 Key Concepts:

• Containers – Define the main layout structure.
• Rows & Columns – Organize content within a grid.
• Breakpoints – Adjust layout for different screen sizes.

---

🔹 2. Understanding Bootstrap Containers

1️⃣ Types of Containers in Bootstrap

Container Type	Usage
.container	Fixed-width container (responsive at breakpoints).
.container-fluid	Full-width container (spans entire screen).
.container-{breakpoint}	Adjusts width based on the specified breakpoint.

✅ Example: Basic Bootstrap Container

✅ Example: Full-Width Container

---

🔹 3. Understanding Bootstrap Rows & Columns

Bootstrap uses rows (.row) and columns (.col-*) to structure content inside containers.

2️⃣ Rows in Bootstrap

• .row creates a horizontal group of columns.
• Rows must be inside a .container.

✅ Example: Creating a Bootstrap Row

🔹 What happens? Bootstrap evenly divides columns inside the row.

---

3️⃣ Columns in Bootstrap

Columns use .col-{size}-{number} classes, where:

• {size} = Breakpoint (sm, md, lg, xl, xxl)
• {number} = Column width (1-12)

✅ Example: Specifying Column Sizes

🔹 What happens?

• On medium (md) screens or larger, the first column takes 4/12 of the space, and the second takes 8/12.
• On smaller screens, both take full width (100%).

---

🔹 4. Bootstrap Grid System Breakpoints

Bootstrap automatically adjusts layouts based on screen sizes.

Breakpoint	Class Prefix	Screen Size
Extra Small	.col-	<576px
Small	.col-sm-	≥576px
Medium	.col-md-	≥768px
Large	.col-lg-	≥992px
Extra Large	.col-xl-	≥1200px
XXL	.col-xxl-	≥1400px

✅ Example: Responsive Columns Using Breakpoints

🔹 What happens?

• On small (sm) screens, each column takes full width (col-sm-12).
• On medium (md) screens, they are 50%-50% (col-md-6).
• On large (lg) screens, they are 4:8 ratio (col-lg-4 and col-lg-8).

---

🔹 5. Advanced Grid Features

1️⃣ Auto Layout Columns (.col-auto)

Columns adjust their width based on content.

✅ Example: Auto-Sized Columns

🔹 What happens? The first column takes up only the space it needs, while the second fills the rest.

---

2️⃣ Offset Columns (.offset-*)

Offsets add space before a column.

✅ Example: Centering a Column Using Offsets

🔹 What happens? The column is centered because it’s pushed 4 columns to the right.

---

3️⃣ Nested Grids

You can nest rows inside columns for complex layouts.

✅ Example: Nesting a Grid

🔹 What happens? A row is nested inside the first column.

---

📝 Lesson Recap Quiz

🎯 Test your knowledge with this quick quiz.

📌 Multiple-Choice Questions (MCQs)

1️⃣ How many columns does Bootstrap’s grid system have?
a) 8
b) 10
c) 12
d) 16

✅ Correct Answer: c) 12

---

2️⃣ What class is used for a full-width container?
a) .container-wide
b) .container-fluid
c) .container-max
d) .container-responsive

✅ Correct Answer: b) .container-fluid

---

3️⃣ What is the purpose of .col-md-6?
a) Creates a 6-column layout for small screens
b) Creates a 6-column layout for medium screens and up
c) Centers the column
d) Removes grid spacing

✅ Correct Answer: b) Creates a 6-column layout for medium screens and up

---

🎯 Practical Challenge

✅ Create a responsive 3-column layout using Bootstrap’s grid system.
✅ Try offsetting one column using .offset-md-2.
✅ Post your code in the discussion forum for feedback!

---

🎓 Lesson Summary

✅ Bootstrap uses a 12-column grid system for flexible, responsive layouts.
✅ .container creates a fixed-width layout, while .container-fluid makes it full-width.
✅ Use .col-* classes to define column sizes at different screen breakpoints.
✅ Advanced features include .col-auto, .offset-*, and nested grids.