Grid

Grid Options

Bootstrap grid allows building equal height flexible blocks easily

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
Container `max-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)
Custom gutters	Yes
Nestable	Yes
Column ordering	Yes

Grid Column

Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns within any .row.

col-xl-1

col-xl-2

col-xl-3

col-xl-4

col-xl-5

col-xl-7

col-xl-6

col-xl-8

col-xl-4

col-xl-9

col-xl-3

col-xl-10

col-xl-2

col-xl-12

Row columns

Use the responsive .row-cols-* classes to quickly set the number of columns that best render your content and layout. Whereas normal .col-* classes apply to the individual columns (e.g., .col-md-4), the row columns classes are set on the parent .row as a default for contained columns. With .row-cols-auto you can give the columns their natural width.

col-xl-3

col-4 col-xl-2

Hello Thomas

Email Notifications

Notifications

Jhon Smith

Grid Options

Grid Column

Row columns