Bootstrap Grids

Bootstrap’s Grid System is one of its most important features — it helps you create flexible, responsive layouts easily using rows and columns.

📌 What Is the Bootstrap Grid?

The Bootstrap grid is a 12-column layout system. You divide content across these 12 columns to create responsive designs.

Example:

| col-4 | col-4 | col-4 | → (4 + 4 + 4 = 12)
| col-6 | col-6 | → (6 + 6 = 12)
| col-3 | col-9 | → (3 + 9 = 12)

🧱 Grid Structure

The basic structure is:

• .container → wraps content

• .row → group of columns

• .col → flexible auto-sized column

📐 Grid Responsive Breakpoints

Bootstrap has responsive classes for different screen sizes:

✔️ Example: Responsive Columns

📌 Behavior:

• Mobile: 1 column each

• Tablet: 2 columns

• Desktop: 3 columns

🔁 Equal & Auto Layout Columns

If you don’t specify size, Bootstrap divides columns equally.

🎯 Fixed Column + Auto Column

📌 Vertical Alignment

Use alignment classes inside the row:

↔️ Horizontal Alignment

Other options:
start, center, end, between, around, evenly

↪️ Reordering Columns

Use order classes:

🚧 Nesting Columns

🧪 Gutters (Spacing Between Columns)

Default spacing removed:

Custom spacing:

🎉 Conclusion

Bootstrap grid helps you create:

• Responsive layouts

• Flexible column structures

• Auto layout + fixed widths

• Easily adjustable alignment and spacing