Grid system

Inspiration comes of working every day.

How it works

Bootstrap has a powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

Grid options

Bootstrap’s grid system can adapt across all six default breakpoints, and any breakpoints you customize. The six default grid tiers are as follow:

  • Extra small (xs)
  • Small (sm)
  • Medium (md)
  • Large (lg)
  • Extra large (xl)
  • Extra extra large (xxl)

As noted above, each of these breakpoints have their own container, unique class prefix, and modifiers. Here’s how the grid changes across these breakpoints:

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

Example: Desktop default grid system

.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-2
.col-lg-2
.col-lg-2
.col-lg-2
.col-lg-2
.col-lg-2
.col-lg-3
.col-lg-3
.col-lg-3
.col-lg-3
.col-lg-4
.col-lg-4
.col-lg-4
.col-lg-6
.col-lg-6
.col-lg-8
.col-lg-4
.col-lg-9
.col-lg-3
.col-lg-10
.col-lg-2
.col-lg-11
.col-lg-1
.col-lg-12
.col-lg-12
.col-lg-8
.col-lg-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-lg-6
.col-lg-6
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-1
.col-lg-3
.col-lg-9

Example: Mobile and desktop

.col-12 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-lg-4
.col-6 .col-lg-4
.col-6 .col-lg-4
.col-6
.col-6

Example: Mobile, tablet, desktop

.col-12 .col-md-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4