Bootstrap

Bootstrap Grid Reference

.col-1 to .col-12

.col-1
Remaining Space

.col-2
Remaining Space

.col-3
Remaining Space

.col-4
Remaining Space

.col-5
Remaining Space

.col-6
Remaining Space

.col-7
Remaining Space

.col-8
Remaining Space

.col-9
Remaining Space

.col-10
Remaining Space

.col-11
Remaining Space

.col-12

.order-*

Use order utilities to visually rearrange columns without changing the HTML.

.order-3
.order-1
.order-2

.order-first
Normal
.order-last

.g-0 to .g-5

Add spacing between columns with Bootstrap’s gap classes. The higher the number, the bigger the space.

.col (g-0)
.col (g-0)

.col (g-3)
.col (g-3)

.col (g-5)
.col (g-5)

.row > .col

Plain .col classes automatically divide available space equally among siblings.

.col
Lorem ipsum dolor sit amet.
.col
Lorem ipsum dolor sit amet.
.col
Lorem ipsum dolor sit amet.

.col-4

Use fixed-width columns like .col-4 to define exact proportions in a row.

.col-4
.col-4
.col-4

.col-sm-6 .col-md-4 .col-lg-3

These classes adjust width depending on screen size. Use ‘sm’, ‘md’, and ‘lg’ for fully responsive designs.

Responsive 1
Responsive 2
Responsive 3
Responsive 4

.offset-*

Offset a column to the right by skipping grid space before it.

.col-4
.col-4.offset-4

Nested Rows

Place rows inside columns to create nested grids.

Parent .col-6

Nested .col
Nested .col

Parent .col-6

Nested .col-6
Nested .col-6