Grid

Grid Options

Bootstrap grid system allows all six breakpoints, and any breakpoints you can customize.

	Extra small 576px	Small 576px	Medium 768px	Large 992px	Extra large 1200px	Extra extra large 1400px
Grid behavior	Horizontal at all times	Collapsed to start, horizontal above breakpoints
Max container width	None (auto)	540px	720px	960px	1140px	1320px
Class prefix	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-	.col-xxl-
# of columns	12
Gutter width	1.5rem (.75rem on left and right)
Nestable	Yes
Offsets	Yes
Column ordering	Yes

Grid For Column

col-md-6

col-md-7

col-md-5

col-md-8

col-md-4

col-md-9

col-md-3

col-md-10

col-md-2

col-md-11

col-md-1

col-md-12

Equal-width

col-md-6

col-md-4

Setting one column width

col-md-3

col-md-6 (wider)

col-md-3

col

col-md-5 (wider)

col

Variable width content

col-lg-4

col-md-auto

col-lg-4

col

col-md-auto

col-lg-2

All Breakpoints

col

col-4

Stacked To Horizontal

col-sm-8

col-sm-4

col-sm

Mix And Match

col-sm-8

col-6 col-md-4

col-6

Nesting

Level 1: .col-sm-3

Level 2: .col-8 .col-sm-6

Level 2: .col-4 .col-sm-6

Horizontal alignment

One of two columns

Vertical alignment

One of three columns

Offset classes

.col-md-4

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

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

Margin Utilities

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-auto .me-auto

.col-auto