Сітка Bootstrap за замовчуванням допускає 12 стовпців із межами шириною 30 пікселів, але ці числа можна змінити. Просто перевірте блок Grid System на сторінці Customize. Поле @grid-columns дозволяє встановити різну кількість стовпців, а поле @grid-gutter-width дозволяє змінити ширину жолоба.26 березня 2015 р.

Базова структура сітки Bootstrap Отже, щоб створити потрібний вам макет, створити контейнер ( <div class="container">). Далі створіть рядок ( <div class="row">). Потім додайте потрібну кількість стовпців (теги з відповідними класами .col-*-*).

CSS Grid доступний. Вимкніть систему сітки за замовчуванням, встановивши $enable-grid-classes: false, і ввімкніть сітку CSS, встановивши $enable-cssgrid: вірно . Потім перекомпілюйте свій Sass.

Утиліти ширини та висоти генеруються з карти $sizes Sass у _variables.scss. Включає підтримку 25%, 50%, 75% і 100% за замовчуванням. Змініть ці значення, оскільки вам потрібно створити тут різні утиліти. Ви також можете використовувати максимальна ширина: 100%; і максимальна висота: 100%; комунальні послуги за потреби.

Усередині «контейнера» створіть ще один div із класом «row», і, як випливає з назви, ми створюємо рядок для обробки стовпців. Заповніть елемент div 'row' 5 елементами div з класом 'col'. Оскільки система сітки Bootstrap 4.0+ тепер перейшла на Flexbox, стовпці розташовуються у п’ять елементів DOM однакового розміру.

Необхідність, щоб адаптивна веб-сторінка була рівномірно розподілена кількома способами, коли вікно перегляду пристрою змінюється, тому Bootstrap вибрав 12-колонковий макет.