12-колонкова сітка

Сіткова система Bootstrap ділить сторінку на 12 колонок, забезпечуючи гнучку та адаптивну структуру макета. Це дозволяє розробникам створювати візуально привабливі та добре структуровані дизайни, які безперешкодно підлаштовуються під різні розміри екранів і пристроїв.

Класи сітки

• container: Клас container обгортає та центрує вміст у контейнері з фіксованою шириною. Забезпечує відступи, поля та правильне вирівнювання вмісту;
• row: Клас row створює горизонтальну групу колонок. Служить контейнером для колонок, забезпечуючи їх правильне вирівнювання та відступи між ними;
• col: Колонки всередині рядка визначаються за допомогою класу col. Розробники задають ширину колонок, використовуючи такі класи, як col-6, col-md-4 або col-lg-3.

Адаптивний дизайн

Сіткова система Bootstrap розроблена для адаптивності, дозволяючи вмісту динамічно підлаштовуватися залежно від розміру вікна перегляду та типу пристрою. Розробники можуть використовувати адаптивні класи сітки, такі як col-md-6 або col-lg-4, щоб задавати ширину колонок для різних розмірів екранів, наприклад, для середніх або великих пристроїв.

Примітка

У Bootstrap класи sm, md, lg та xl позначають різні розміри екранів

Приклади

Приклад 1: Базове компонування сітки

У цьому прикладі контейнер містить один рядок із трьома стовпцями однакової ширини. Кожен стовпець займає рівну частину ширини рядка, утворюючи горизонтальне компонування з трьох стовпців.

Приклад 2: Адаптивне компонування сітки

У цьому прикладі контейнер містить один рядок із трьома стовпцями. Перші два стовпці (col-md-6) займають половину ширини рядка на екранах середнього розміру та більше. Третій стовпець (col-md-12) займає всю ширину рядка на екранах середнього розміру та більше. Це гарантує, що третій стовпець займає всю ширину рядка.

Результат поведінки адаптивної сітки