💚 Day 23 — Bootstrap Grid System & Layouts

Welcome to Day 23! 🌟 Now that your Bootstrap setup is ready, it’s time to understand the **Grid System** — the backbone of responsive design. The grid system uses **rows** and **columns** to create flexible layouts that adapt beautifully across all devices.

🧩 1️⃣ The Bootstrap Grid Concept

Bootstrap uses a **12-column** grid layout. This means the total width of a row is divided into 12 equal columns — and you can combine them in different ways.

<div class="row">
  <div class="col-4 bg-light">Column 1</div>
  <div class="col-8 bg-success text-white">Column 2</div>
</div>

📏 2️⃣ Breakpoints

Bootstrap grids are responsive by design. You can specify how many columns to show at each screen size using these breakpoints:

• .col- — Extra small devices (<576px)
• .col-sm- — Small (≥576px)
• .col-md- — Medium (≥768px)
• .col-lg- — Large (≥992px)
• .col-xl- — Extra large (≥1200px)

📱 3️⃣ Example: Responsive Columns

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-6 col-lg-4 bg-info p-3 text-white">Box 1</div>
    <div class="col-sm-12 col-md-6 col-lg-4 bg-success p-3 text-white">Box 2</div>
    <div class="col-sm-12 col-md-12 col-lg-4 bg-warning p-3 text-dark">Box 3</div>
  </div>
</div>

🎯 4️⃣ Nesting Rows

You can place another .row inside a column to create nested layouts.

🧱 5️⃣ Alignment Classes

Use these utility classes to align items inside the grid:

• .justify-content-center — Center horizontally
• .align-items-center — Center vertically

🧠 6️⃣ Gutters (Spacing Between Columns)

.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
}

Use g-0 to remove spacing or g-3 to increase spacing between columns.

🧮 7️⃣ Practice Task

1. Create a 3-column layout using the grid system.
2. Make it responsive for small screens using col-sm classes.
3. Add spacing using g-3 and center the row.

🎯 Summary

Bootstrap’s grid system is your foundation for responsive layouts. With containers, rows, columns, and breakpoints, you can make websites that adapt perfectly to every screen size.

← Prev Next →