Grids
Grid Options
Extra small
<576px |
Small
≥576px |
Medium
≥768px |
Large
≥992px |
Extra large
≥1200px |
|
---|---|---|---|---|---|
Max container width | None (auto) | 540px | 720px | 960px | 1140px |
Class prefix |
.col-
|
.col-sm-
|
.col-md-
|
.col-lg-
|
.col-xl-
|
# of columns | 12 | ||||
Gutter width | 30px (15px on each side of a column) | ||||
Nestable | Yes | ||||
Column ordering | Yes |
Basic Grids
1 of 2
2 of 2
1 of 3
2 of 3
3 of 3
Grid Responsive Classes
col
col
col
col
col-8
col-4
Horizontal Grid Alignment
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
Vertical Grid Alignment
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
Ordered Grid Classes
First, but unordered
Second, but last
Third, but first
First, but last
Second, but unordered
Third, but first
Grid Offset Classes
.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3
Nesting Grids
Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
© 2018 Modernize . All Rights Reserved | Design by W3layouts