Bootstrap Flex Playground
Створюйте flex-макети на Bootstrap 5.3 візуально та копіюйте точні utility-класи — d-flex, justify-content, align-items, order, grow та інші.
—
Усе працює у вашому браузері — нічого не завантажується.
Задані класи застосовуються починаючи з цієї контрольної точки й вище. Перемикайте контрольні точки, щоб створювати адаптивні макети.
Про Bootstrap Flex Playground
Bootstrap Flex Playground дозволяє створювати flexbox-макети за допомогою справжніх утилітарних класів Bootstrap 5.3 замість чистого CSS. Налаштуйте контейнер — напрямок, перенесення, justify-content, align-items, gap — за допомогою сегментованих елементів керування, клацніть будь-який елемент, щоб задати його власні утиліти align-self, order, grow і shrink, і спостерігайте, як живий попередній перегляд миттєво перебудовується.
Перемикач контрольних точок робить цей інструмент чимось більшим за іграшку: оберіть sm, md, lg, xl або xxl, і класи, які ви встановлюєте з цієї точки, отримують адаптивний інфікс — justify-content-md-between, flex-lg-row — саме так, як система Bootstrap, орієнтована на мобільні пристрої, застосовує їх від цієї контрольної точки й вище. Додайте до 12 елементів, щоб змоделювати реалістичний компонент.
Коли макет виглядає правильно, скопіюйте згенерований HTML або лише класи контейнера й вставте їх безпосередньо у свій проєкт. Усе відбувається у вашому браузері, і нічого не завантажується на сервер.
Як використовувати Bootstrap Flex Playground
- Налаштуйте утиліти контейнера — напрямок, перенесення, justify-content, align-items і gap — за допомогою сегментованих елементів керування.
- Додайте або видаліть елементи (від 2 до 12), щоб відповідати вашому реальному компоненту.
- Клацніть елемент, щоб надати йому власні утиліти align-self, order чи розмірів flex.
- Перемикайте контрольні точки, щоб додати адаптивні варіанти, які застосовуються від sm, md, lg, xl чи xxl і вище.
- Перегляньте живий попередній перегляд, а потім скопіюйте згенерований HTML або класи контейнера.