Приклади сіток Bootstrap

Основні макети сітки, щоб ви ознайомилися з побудовою в системі сітки Bootstrap.

У цих прикладах .themed-grid-colклас додається до стовпців, щоб додати деяку тематику. Це не той клас, який доступний у Bootstrap за замовчуванням.

П'ять рівнів сітки

Є п’ять рівнів сіткової системи Bootstrap, по одному для кожного діапазону пристроїв, які ми підтримуємо. Кожен рівень починається з мінімального розміру вікна перегляду та автоматично застосовується до більших пристроїв, якщо його не змінити.

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

Три рівні стовпчики

Отримайте три стовпці однакової ширини, починаючи від робочих столів і масштабуючи їх до великих робочих столів . На мобільних пристроях, планшетах і нижче стовпці складатимуться автоматично.

.col-md-4

Альтернатива трьох рівних колонок

Використовуючи .row-cols-*класи, ви можете легко створити сітку з рівними стовпцями.

.colдитина .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-4

Змішаний: мобільний і настільний

Сітка Bootstrap v5 має шість рівнів класів: xs (дуже малий, цей інфікс класу не використовується), sm (маленький), md (середній), lg (великий), xl (x-великий) і xxl (xx - великий). Ви можете використовувати майже будь-яку комбінацію цих класів для створення більш динамічних і гнучких макетів.

Кожен рівень класів збільшується, тобто якщо ви плануєте встановити однакову ширину для md, lg, xl і xxl, вам потрібно вказати лише md.

.col-md-8

.col-6 .col-md-4

.col-6

Змішаний: мобільний, планшетний і комп’ютерний

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

.col-6 .col-lg-4

.col-6 .col-sm-4

Водостічні жолоби

За допомогою .gx-*класів горизонтальні жолоби можна регулювати.

.colз .gx-4жолобами

Використовуйте .gy-*класи для керування вертикальними жолобами.

.colз .gy-4жолобами

За допомогою .g-*класів можна регулювати жолоби в обох напрямках.

.colз .g-3жолобами

Контейнери

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

.контейнер

.контейнер-см

.container-md

.container-lg

.container-xl

.container-xxl

.ємність-рідина