Майданчик сітки 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 або класи рядка.