Bootstrap 4 Сетка / Grid

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

Система сетки Bootstrap построена с помощью flexbox и позволяет разместить до 12 столбцов на странице.

Если вы не хотите использовать все 12 столбцов по отдельности, вы можете сгруппировать столбцы вместе, чтобы создать более широкие столбцы:

Система сетки реагирует, и столбцы будут автоматически переставляться в зависимости от размера экрана.

Убедитесь, что количество столбцов составляет 12 или менее (не обязательно использовать все 12 доступных столбцов).

Классы сетки

Система сетки Bootstrap 4 имеет пять классов:

• .col- (extra small / экстрамалые устройства - ширина экрана менее 576 пикселей)
• .col-sm- (small devices / маленькие устройства - ширина экрана равна или больше 576 пикселей)
• .col-md- (medium devices / средние устройства - ширина экрана равна или больше 768 пикселей)
• .col-lg- (large devices / большие устройства - ширина экрана не менее 992 пикселей)
• .col-xl- (xlarge devices / экстрабольшие устройства - ширина экрана равна или превышает 1200 пикселей)

Указанные выше классы можно комбинировать для создания более динамичных и гибких макетов.

Совет: Каждый класс масштабируется, поэтому, если вы хотите установить одинаковую ширину для sm и md, вам нужно только указать sm.

Базовая структура сетки Bootstrap 4

Ниже приведена базовая структура сетки Bootstrap 4:

Первый пример: создать строку (<div class="row">). Затем добавьте нужное количество столбцов (теги с соответствующими .col-*-* классами). Первая звезда (*) представляет отзывчивость: sm, md, lg или xl, а вторая звезда представляет число, которое должно составлять до 12 для каждой строки.

Второй пример: вместо добавления номера к каждому col, пусть bootstrap обрабатывает макет, чтобы создать столбцы равной ширины: два "col" элемента = 50% ширины для каждого столбца. три столбца = 33,33% ширины каждого столбца. четыре столбца = 25% ширины и т.д. Вы также можете использовать .col-sm|md|lg|xl чтобы сделать столбцы адаптивными.

Ниже мы собрали несколько примеров основных макетов сетки Bootstrap 4.

Три равных столбца

В следующем примере показано, как создать три столбца одинаковой ширины на всех устройствах и ширине экрана:

Адаптивные столбцы

В следующем примере показано, как создать четыре столбца одинаковой ширины, начиная с планшетов и масштабируя их до экстра больших (extra large) десктопов. На мобильных телефонах или экранах шириной менее 576 пикселей столбцы автоматически накладываются друг на друга:

Два неравных адаптивных столбца

В следующем примере показано, как получить два столбца различной ширины, начиная с планшетов и масштабируя их до экстра больших (extra large) десктопов: