Bootstrap Flex Playground
Build Bootstrap 5.3 flex layouts visually and copy the exact utility classes — d-flex, justify-content, align-items, order, grow and more.
—
Everything runs in your browser — nothing is uploaded.
Classes you set apply from this breakpoint and up. Switch breakpoints to build responsive layouts.
About Bootstrap Flex Playground
The Bootstrap Flex Playground lets you build flexbox layouts with real Bootstrap 5.3 utility classes instead of raw CSS. Configure the container — direction, wrapping, justify-content, align-items, gap — with segmented controls, click any item to set its own align-self, order, grow and shrink utilities, and watch the live preview rearrange instantly.
The breakpoint switcher is what makes it more than a toy: pick sm, md, lg, xl or xxl and the classes you set from that point gain the responsive infix — justify-content-md-between, flex-lg-row — exactly as Bootstrap’s mobile-first system applies them from that breakpoint and up. Add up to 12 items to simulate a realistic component.
When the layout looks right, copy the generated HTML or just the container classes and paste them straight into your project. Everything runs in your browser and nothing is uploaded.
How to use Bootstrap Flex Playground
- Set the container utilities — direction, wrap, justify-content, align-items and gap — with the segmented controls.
- Add or remove items (2 to 12) to match your real component.
- Click an item to give it its own align-self, order or flex sizing utilities.
- Switch breakpoints to add responsive variants that apply from sm, md, lg, xl or xxl upward.
- Check the live preview, then copy the generated HTML or the container classes.