The UiKit grid supports four different screen sizes. The table below describes how to use these screen sizes.
| Extra small devices Phones (<768px and lower) | Small devices Tablets (≥768px and up) | Medium devices Desktops (≥992px and up) | Large devices Desktops (≥1200px and up) | |
|---|---|---|---|---|
| Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | ||
| Container width | None (auto) | 750px | 970px | 1170px |
| Class prefix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| # of columns | 12 | |||
| Column width | Auto | 60px | 78px | 95px |
| Gutter width | 30px (15px on each side of a column) | |||
| Nestable | Yes | |||
| Offsets | Yes | |||
| Column ordering | Yes | |||
The basic grid provides an example to using the grid on one device. However, the responsive grids are actually 4 grids in one.
The following example shows a grid with two screen sizes -- extra small and medium.
The responsive grids have an implicit range when used together. In the example above, the first row has 2 divs. The first div labeled .col-md-8 .col-xs-12 specifies two different column widths for two devices. However, since the md and xs classes have two screen limits, they create an implicit range.
For example:
.col-md-8.col-xs-12md (≤991px) are 12 columns widemd (≥992px) are 8 columns wide
.col-md-4.col-xs-6md (≤991px) are 6 columns widemd (≥992px) are 4 columns wide
To cover all screen sizes with the responsive grid, up to four col-* classes can be added. Just like above the class will apply to the lowest size screen.
.col-md-8 .col-sm-6 .col-xs-12xs (<768px and below) are 12 columns widesm - md (768px - 991px) are 6 columns widemd (992px and above) are 8 columns
Naturally, columns will float to other columns. This can become and issue when columns become different sizes. Then the sibling columns wraps. Doesn't look good.
To solve this, add a .clearfix to an empty div between the wrapping columns.