The default Bootstrap Grid only provides grid dimensions up to 1200px. Using the same mixins and variables provided by Bootstrap, the grid has been extended to support various larger resolution screens, such as HDTVs and the 15" Retina MacBook Pro.
Please consult the original Bootstrap Grid docs for an introduction to the Bootstrap Grid and its usage.
| 720p ≥1366px | Full HD 1080p ≥1920px | Retina 1440p ≥2560px | 15" Retina ≥2880px | UHD ≥3840px | 4K ≥4096px | 8K ≥8192px | |
|---|---|---|---|---|---|---|---|
| Grid behavior | Collapsed to start, horizontal above breakpoints | ||||||
| Class prefix | .col-xlg- |
.col-fhd- |
.col-rt- |
.col-rt15- |
.col-uhd- |
.col-4k- |
.col-8k- |
| # of columns | 12 | ||||||
| Gutter width | 30px (15px on each side of a column) | ||||||
| Nestable | Yes | ||||||
| Offsets | Yes | ||||||
| Column ordering | Yes | ||||||
Please consult the original Bootstrap Responsive Utilities docs for description and usage guidelines.
| 720p ≥1366px | Full HD 1080p ≥1920px | Retina ≥2560px | 15" Retina ≥2880px | UHD ≥3840px | 4K ≥4096px | 8K ≥8192px | |
|---|---|---|---|---|---|---|---|
.visible-xlg |
Visible | Hidden | Hidden | Hidden | Hidden | Hidden | Hidden |
.visible-fhd |
Hidden | Visible | Hidden | Hidden | Hidden | Hidden | Hidden |
.visible-rt |
Hidden | Hidden | Visible | Hidden | Hidden | Hidden | Hidden |
.visible-rt15 |
Hidden | Hidden | Hidden | Visible | Hidden | Hidden | Hidden |
.visible-uhd |
Hidden | Hidden | Hidden | Hidden | Visible | Hidden | Hidden |
.visible-4k |
Hidden | Hidden | Hidden | Hidden | Hidden | Visible | Hidden |
.visible-8k |
Hidden | Hidden | Hidden | Hidden | Hidden | Hidden | Visible |
.hidden-xlg |
Hidden | Visible | Visible | Visible | Visible | Visible | Visible |
.hidden-fhd |
Visible | Hidden | Visible | Visible | Visible | Visible | Visible |
.hidden-rt |
Visible | Visible | Hidden | Visible | Visible | Visible | Visible |
.hidden-rt15 |
Visible | Visible | Visible | Hidden | Visible | Visible | Visible |
.hidden-uhd |
Visible | Visible | Visible | Visible | Hidden | Visible | Visible |
.hidden-4k |
Visible | Visible | Visible | Visible | Visible | Hidden | Visible |
.hidden-8k |
Visible | Visible | Visible | Visible | Visible | Visible | Hidden |
Resize your browser or load on different devices to test the responsive utility classes.
Green checkmarks indicate the element is visible in your current viewport.
Here, green checkmarks also indicate the element is hidden in your current viewport.