Bootstrap 4 Grid для больших разрешений экранов

В работе над версткой часто необходимо работать и с большими разрешениями экранов, но, к сожалению, большинство фреймворков ограничивают стили грида максимальным разрешением экрана в 1200px. Исключением не стала и новая, четвертая версия популярного фреймворка Bootstrap.

Немного о гриде

Так как в нашей работе такая необходимость частов возникает, мы разработали файл со стилями грида для большинства разрешений col-xga (1600+), col-fhd (1920+), col-rt (2560+), col-rt15 (2880+), col-uhd (3840+), col-4k (4096+), col-8k (8192+)) пикселей.

Помимо работы с колонками грида, файл так же содержит такие важные опции, как order и offser, опции типа отображения эллементов none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex и другие flex, justify-content, align-items, align-content и align-self.

Файл выложили для всеобщего использования, будем рады, если проявите интерес к нашим работам отзывом, рекомендацией или пул-реквестом.

Установка

Файл со стилем необходимо подключить после основного bootstrap.min.css и перед остальными стилями для сайта.

Ссылка на репозиторий:

https://github.com/adminnu/bootstrap-largegrid

Стандартные средства bootstrap 4

В четвертой версии появились уровни сетки (Grid tiers) с помощью которых можно добавить свои уровни сетки, в том числе это подходит для добавления больших разрешений, но библиотеку необходимо перекомпилировать с помощью SASS компилятора.

Для компиляции скачиваем последнюю версию билиотеки и меняем следующие значения двух переменных:

Важно! Значения указываем только в px (пикселях).

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xga: 1600px,
  fhd: 1920px,
  rt: 2560px,
  rt15: 2880px,
  uhd: 3840px,
  4k: 4096px,
  8k: 8192px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xga: 1530px,
  fhd: 1830px,
  rt: 2470px,
  rt15: 2790px,
  uhd: 3810px,
  4k: 4006px,
  8k: 8102px
);

Всем успехов в красивой и удобной верстке!