Bootstrap 5.3 flexbox utilities make responsive design easy with classes like d-flex for creating flex containers.

Use our interactive playground to create easily your flex container as you need.

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5

Result template:

<div class="d-flex flex-row justify-content-start align-items-start"></div>

Result template:

<div class="d-flex flex-row justify-content-start align-items-start"></div>


Direction

Justify content

Align items


Bootstrap 5.3 introduces powerful and intuitive flexbox utilities that make designing responsive layouts easier than ever.

With its d-flex class, you can quickly transform a container into a flex container and leverage a wide range of alignment and spacing options.

It supports properties like justify-content for horizontal alignment and align-items for vertical alignment, allowing precise control over content placement.

Additionally, Bootstrap flex utilities include features like wrapping, order management, and responsive breakpoints to adapt designs seamlessly across various screen sizes.

Whether you’re building a complex grid or a simple navigation bar, Bootstrap 5.3 flexbox tools ensure flexibility and efficiency for modern web design.

start: Aligns items to the start of the parent element.

center: Centers items within the parent element.

end: Aligns items to the end of the parent element.

baseline: Aligns items along their baselines.

stretch: Stretches items to fill the available space.