Песочница сетки Bootstrap
Визуально создавайте адаптивные макеты на сетке Bootstrap 5.3 и копируйте точные классы — row, col, отступы, порядок, желоба и выравнивание.
—
Всё выполняется в вашем браузере — ничего не загружается.
Заданные классы применяются начиная с этой контрольной точки и выше. Переключайте контрольные точки, чтобы создавать адаптивные макеты.
О Песочница сетки Bootstrap
Bootstrap Grid Playground создаёт адаптивные макеты строк и колонок с использованием настоящей сеточной системы Bootstrap 5.3. Добавьте до 12 колонок в строку, щёлкните по любой колонке, чтобы задать её ширину, отступ и порядок, и настройте промежутки и выравнивание для строки — превью и сгенерированная разметка обновляются в реальном времени при каждом изменении.
Поскольку сетки Bootstrap ориентированы на мобильные устройства в первую очередь, переключатель контрольных точек играет центральную роль: задайте для колонки col-6 на базовом уровне и col-md-4 на md, и вы получите классический шаблон «в столбик на мобильном, в три колонки на десктопе» без единой строчки кода. Отступы, порядок и классы промежутков используют одни и те же адаптивные инфиксы.
Результат — чистый HTML, готовый для копирования и вставки: div строки с дочерними колонками и именно теми классами, которые вы настроили. Скопируйте весь фрагмент или только классы строки; всё выполняется локально в вашем браузере.
Как использовать Песочница сетки Bootstrap
- Добавьте колонки в строку — до 12 — и щёлкните по одной, чтобы выбрать её.
- Задайте для выбранной колонки ширину, отступ и порядок для текущей контрольной точки.
- Переключайте контрольные точки (от sm до xxl), чтобы определить, как макет будет перестраиваться на больших экранах.
- Настройте промежутки строки и её утилиты выравнивания.
- Просмотрите живое превью, затем скопируйте сгенерированный HTML или классы строки.