Bootstrap 4 CSS Grid addition for big and retina screens coverage and SASS tiers grid file.
| HD+ ≥1600px | 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-xga- |
.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 | ||||||
- Adding col-xga (1600+), col-fhd (1920+), col-rt (2560+), col-rt15 (2880+), col-uhd (3840+), col-4k (4096+), col-8k (8192+) classes with all related options: order, offser
- Adding options none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex for all three
- Adding options flex-, justify-content-, align-items-, align-content-, align-self* for all three
Simply include bootstrap-largegrid.min.css file in header, after bootstrap.min.css and before your own CSS styles.
- MIT license, so use, modify and improve as you wish
- Fork & Pull requests are welcome
- Will be glad to hear about projects you have used this on
- Enjoy