Flex

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.

Enable flex behaviors

Apply display: flex to create a flexbox container and transform direct children into flex items.

Flex item 1

Flex item 2

Flex item 3

<div class="d-flex">...</div>

Responsive variants: d-sm-flex, d-md-flex, d-lg-flex, etc. Or d-inline-flex for inline behavior.

row 1

row 2

col 1

col 2

start

center

end

between

around

start

center

end

flex-fill

flex-grow-1

auto

Change the visual order with .order-{0..5}, .order-first, .order-last, responsive as needed.

Ordered last

Ordered first

start

center

end

Use .gap-{0..5} (and responsive) for consistent spacing between flex or grid children:

gap-3