Примеры сетки Bootstrap

Базовые макеты сеток, которые познакомят Вас со строительством в сеточной системе Bootstrap.

В этих примерах к колонкам добавлен класс .themed-grid-col, чтобы добавить тематику. Это не тот класс, который по умолчанию доступен в Bootstrap.

Пять уровней сетки

В сеточной системе Bootstrap есть пять уровней, по одному для каждого диапазона поддерживаемых нами устройств. Каждый уровень начинается с минимального размера области просмотра и автоматически применяется к более крупным устройствам, если не отменен.

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4
.col-xxl-4
.col-xxl-4
.col-xxl-4

Три равных колонки

Получите три колонки одинаковой ширины начиная с рабочих столов и заканчивая большими компьютерами. На мобильных устройствах, планшетах и более ранних версиях колонки автоматически складываются друг в друга.

.col-md-4
.col-md-4
.col-md-4

Три равных колонки альтернативный вариант

Используя классы .row-cols-*, Вы можете легко создать сетку с равными колонками.

.col child of .row-cols-md-3
.col child of .row-cols-md-3
.col child of .row-cols-md-3

Три неравных колонки

Получите три колонки начиная с рабочих столов и заканчивая большими рабочими столами различной ширины. Помните, что количество колонок сетки должно составлять до двенадцати для одного горизонтального блока. Более того, колонки начинают складываться независимо от области просмотра.

.col-md-3
.col-md-6
.col-md-3

Две колонки

Получите две колонки начиная с рабочих столов и заканчивая большими рабочими столами.

.col-md-8
.col-md-4

На всю ширину, одна колонка

Для элементов на всю ширину классы сетки не требуются.

Две колонки с двумя вложенными колонками

Согласно документации, вложенность выполняется просто - просто поместите строку колонок в существующий столбец. Это дает Вам две колонки, начиная с рабочих столов и масштабируясь до больших рабочих столов, и еще два (одинаковой ширины) в пределах большей колонки.

При размерах мобильных устройств, планшетов и ниже эти колонки и их вложенные колонки будут складываться друг с другом.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Смешанный: мобильный и настольный

Сетка Bootstrap v4 имеет пять уровней классов: xs (очень маленький, этот инфикс класса не используется), sm (маленький), md (средний), lg (большой) и xl (очень большой). Вы можете использовать практически любую комбинацию этих классов для создания более динамичных и гибких макетов.

Каждый уровень классов масштабируется, это означает, что если Вы планируете установить одинаковую ширину для md, lg и xl, Вам нужно только указать md.

.col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

Смешанный: мобильный, планшетный и настольный

.col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4

Промежутки

С помощью классов .gx-* можно настраивать горизонтальные промежутки.

.col с .gx-4 промежутками
.col с .gx-4 промежутками
.col с .gx-4 промежутками
.col с .gx-4 промежутками
.col с .gx-4 промежутками
.col с .gx-4 промежутками

Используйте классы .gy-* для управления вертикальными промежутками.

.col с .gy-4 промежутками
.col с .gy-4 промежутками
.col с .gy-4 промежутками
.col с .gy-4 промежутками
.col с .gy-4 промежутками
.col с .gy-4 промежутками

Классы .g-* озволяют регулировать промежутки в обоих направлениях.

.col с .g-3 промежутками
.col с .g-3 промежутками
.col с .g-3 промежутками
.col с .g-3 промежутками
.col с .g-3 промежутками
.col с .g-3 промежутками

Контейнеры

Дополнительные классы, добавленные в Bootstrap v4.4, позволяют использовать контейнеры со 100% шириной до определенной контрольной точки. v5 добавляет новую контрольную точку xxl.

.container
.container-sm
.container-md
.container-lg
.container-xl
.container-xxl
.container-fluid