Day 3 - Grid Layout

Master Bootstrap's powerful 12-column grid system for responsive layouts.

1. The 12-Column Grid

Bootstrap's grid system divides the page into 12 equal columns. You can combine these columns to create any layout.

1
2
3
4
5
6
7
8
9
10
11
12

2. Rows and Columns

.row

Defines a horizontal group of columns. Ensures columns line up correctly.

.col

Creates auto-sized columns that share available space equally.

Auto Columns

.col creates equal-width columns:

col
col
col
Specific Column Widths

Use .col-{number} for specific widths (out of 12):

.col-6 + .col-6 = 12

col-6
col-6

.col-4 + .col-4 + .col-4 = 12

col-4
col-4
col-4

.col-3 + .col-6 + .col-3 = 12

col-3
col-6
col-3

3. Responsive Columns

Add breakpoint prefixes to make columns respond to screen size: .col-sm-, .col-md-, .col-lg-, .col-xl-

.col-12 .col-md-6 .col-lg-3 - Stack on mobile, 2 on tablet, 4 on desktop

Responsive
Responsive
Responsive
Responsive

4. Gutters (Spacing)

Gutters control the spacing between columns. Use .g-{0-5}, .gx-{0-5}, or .gy-{0-5}:

.g-0 - .g-5

All sides

.gx-0 - .gx-5

Horizontal only

.gy-0 - .gy-5

Vertical only

Gutter Examples

.g-0 - No gutter:

col
col
col

.g-4 - Large gutter:

col
col
col

5. Alignment

Vertical Alignment

Apply to .row to align columns vertically:

.align-items-start

Start
Start
Start

.align-items-center

Center
Center
Center

.align-items-end

End
End
End
Horizontal Alignment

Apply to .row to align columns horizontally:

.justify-content-start

Start
Start

.justify-content-center

Center
Center

.justify-content-end

End
End

.justify-content-between

Between
Between

.justify-content-around

Around
Around

.justify-content-evenly

Evenly
Evenly
< Previous: Containers | Next: Images >