Bootstrap Flex площадка
Изграждайте flex оформления с Bootstrap 5.3 визуално и копирайте точните utility класове — d-flex, justify-content, align-items, order, grow и други.
—
Всичко работи във вашия браузър — нищо не се качва.
Зададените от вас класове важат от тази точка на пречупване нагоре. Превключвайте точките на пречупване, за да изградите адаптивни оформления.
За Bootstrap Flex площадка
Плейграундът за Bootstrap Flex ви позволява да изграждате flexbox оформления с реални помощни класове на Bootstrap 5.3 вместо суров CSS. Конфигурирайте контейнера — посока, пренасяне, justify-content, align-items, разстояние — със сегментирани контроли, кликнете върху всеки елемент, за да зададете собствен align-self, ред, growth и свиване, и наблюдавайте как прегледът на живо се преподрежда мигновено.
Превключвателят на прекъсните точки е това, което го прави повече от играчка: изберете sm, md, lg, xl или xxl и класовете, които задавате от тази точка нататък, получават отзивчивия суфикс — justify-content-md-between, flex-lg-row — точно както mobile-first системата на Bootstrap ги прилага от тази прекъсна точка нагоре. Добавете до 12 елемента, за да симулирате реалистичен компонент.
Когато оформлението изглежда правилно, копирайте генерирания HTML или само класовете на контейнера и ги поставете директно в проекта си. Всичко работи във вашия браузър и нищо не се качва.
Как да използвате Bootstrap Flex площадка
- Задайте помощните класове на контейнера — посока, пренасяне, justify-content, align-items и разстояние — със сегментираните контроли.
- Добавете или премахнете елементи (от 2 до 12), за да съответстват на реалния ви компонент.
- Кликнете елемент, за да му зададете собствени помощни класове за align-self, ред или размер на flex.
- Превключете прекъснатите точки, за да добавите отзивчиви варианти, приложими от sm, md, lg, xl или xxl нагоре.
- Проверете прегледа на живо, след което копирайте генерирания HTML или класовете на контейнера.