Система сеток Bootstrap 4



Система сеток позволяют создавать продвинутые макеты с использованием рядов и колонок. Сетка Bootstrap может содержать до 12 колонок, и вы можете указать, как эти колонки будут маcштабироваться для разных размеров области просмотра.
Пример:


Числа в конце каждого имени класса означают количество занимаемых колонок.
Так, .col-sm-1 занимает одну колонку, а .col-sm-8восемь.
sm (от слова small — маленький) означает, что колонка применяется к небольшим устройствам и всему выше. Вы также можете использовать
md (от medium — средний),
lg (large — большой) и
xl (extra large — очень большой) для средних, больших и очень больших размеров.
Для сверхмалых устройств средняя часть в имени опускается.
 Например, .col-8 занимает восемь колонок на очень маленьких устройствах и выше (другими словами, на всех устройствах).

Размещение по горизонтали

В следующем примере используется та же самая разметка, но в этот раз мы используем md для «средних». Это означает, что если область просмотра меньше «среднего» (то есть меньше 768 пикселей), то ячейки в сетке будут располагаться друг под другом, а каждая ячейка будет занимать всю ширину.
Если вы просматриваете пример на широком экране, то пример может не отличаться от предыдущего. Однако, если вы уменьшите размер своего браузера, ячейки в конечном итоге разместятся друг под другом (предыдущий пример останется без изменений).
Пример:

Размеры сетки

В следующей таблице показано, как различные параметры сетки работают с разными размерами области просмотра.


Сверхмалая <576pxМалая ≥576pxСредняя ≥768pxБольшая ≥992pxСверхбольшая ≥1200px
Максимальная ширина контейнераНет (Auto) 540px720px960px1140px
Префикс класса.col-.col-sm-.col-md-.col-lg-.col-xl-
Число колонок
12
Межколоночный интервал
30px (по 15px с каждой стороны колонки)
Вложенность
Да
Порядок колонок
Да

Обратите внимание, что Bootstrap 4 теперь использует пятиуровневую систему сетки(в отличие от четырёхуровневой в Bootstrap 3).

Что надо знать про сетки


Контейнеры

Сетки должны размещаться в контейнере (с помощью класса .container или .container-fluid) для правильных отступов и выравнивания.


Ряды и колонки

Ряды содержат один или несколько колонок, в колонах хранится содержимое. Только колонки могут быть непосредственными потомками рядов.


Padding

Колонки содержат padding, однако для первой и последней колонок padding компенсируется отрицательным margin для ряда. Вот почему вышеприведённые примеры содержат изъян — содержимое внутри сетки выравнивается с содержимым вне сетки.


Более 12 колонок на строку?

Если в ряду размещается более 12 колонок, то они переносятся на новую строку, при этом колонки переносятся группой. Например, если ряд содержит col-md-10 и col-md-3, то весь col-md-3 будет перенесён на новую строку.


Менее 12 столбцов на строку?

Вам не нужно задействовать все 12 столбцов, можете использовать любое количество колонок, вплоть до 12. К примеру, у вас может быть ряд, в которой общее число колонок равно трём.


Классы сетки

Классы сетки применяются к устройствам с шириной экрана, больше или равной размерам точек останова, и переопределяют классы сетки, предназначенных для небольших устройств. Поэтому использование любого класса .col-sm- *повлияет не только на маленькие области просмотра, но и на средние, большие и очень большие (кроме случаев, когда также присутствует col-md-*, col-lg-*, col-xl-*).


Несколько классов

Вы можете включить несколько классов размера для данного элемента. Например, вы можете использовать class="col-sm-10 col-md-6", тем самым указать 10 колонок для маленьких экранов и 6 колонок для средних и больших экранов.