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 и отступы — с помощью сегментированных элементов управления.
- Добавьте или удалите элементы (от 2 до 12), чтобы соответствовать вашему реальному компоненту.
- Щёлкните по элементу, чтобы задать ему собственные утилиты align-self, order или размеры flex.
- Переключайте контрольные точки, чтобы добавить адаптивные варианты, применяемые начиная с sm, md, lg, xl или xxl и выше.
- Проверьте живое превью, затем скопируйте сгенерированный HTML или классы контейнера.