The grid requires a containing element to wrap site contents and house our grid system. The grid container is a fluid width, with a max-width of 1920px (our most common desktop resolution) and min-width of 1024px.
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-3
.col-3
.col-3
.col-3
.col-4
.col-4
.col-4
.col-6
.col-6
.col-4
.col-8
| Containers | .row |
| Required | .col-1 .col-2 .col-3 .col-4 .col-5 .col-6 .col-7 .col-8 .col-9 .col-10 .col-11 .col-12 |
.col-6.col-start-4
.col-4.col-start-3
.col-4
.col-2.col-start-2
.col-6.col-start-6
.col-4
.col-7.col-start-6
| Containers | .row |
| Modifiers | .col-start-1 .col-start-2 .col-start-3 .col-start-4 .col-start-5 .col-start-6 .col-start-7 .col-start-8 .col-start-9 .col-start-10 .col-start-11 |
Currently, many teams are leveraging grid classes from Bootstrap. While we'd like teams to implement the Style Guide grid, we define some standards around using Bootstrap's container, rows and columns.
The container, similar to Style Guide's grid, should be a max-width of 1920px (our most common desktop resolution) and min-width of 1024px. We also suggest that the container align to the left, as to stay stuck to the Tiara navigation to avoid large gaps of whitespace between navigation and content. Note that, .container within Bootstrap should also not be nested.