Flex
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.
Flex on BootstrapFlexbox container!
Inline flexbox container!
<div class="d-flex p-2 bg-200 mb-2">Flexbox container!</div>
<div class="d-inline-flex p-2 bg-200">Inline flexbox container!</div>
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
<div class="d-flex bg-200 mb-3 flex-row">
<div class="p-2 bg-300 border border-400">Flex item 1</div>
<div class="p-2 bg-300 border border-400">Flex item 2</div>
<div class="p-2 bg-300 border border-400">Flex item 3</div>
</div>
<div class="d-flex bg-200 mb-3 flex-row-reverse">
<div class="p-2 bg-300 border border-400">Flex item 1</div>
<div class="p-2 bg-300 border border-400">Flex item 2</div>
<div class="p-2 bg-300 border border-400">Flex item 3</div>
</div>
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
<div class="d-flex bg-200 mb-3 flex-column">
<div class="p-2 bg-300 border border-400">Flex item 1</div>
<div class="p-2 bg-300 border border-400">Flex item 2</div>
<div class="p-2 bg-300 border border-400">Flex item 3</div>
</div>
<div class="d-flex bg-200 mb-3 flex-column-reverse">
<div class="p-2 bg-300 border border-400">Flex item 1</div>
<div class="p-2 bg-300 border border-400">Flex item 2</div>
<div class="p-2 bg-300 border border-400">Flex item 3</div>
</div>
Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
<div class="d-flex justify-content-start bg-200 mb-2">
<div class="p-2 bg-300 border border-400">Flex Item</div>
</div>
<div class="d-flex justify-content-end bg-200 mb-2">
<div class="p-2 bg-300 border border-400">Flex Item</div>
</div>
<div class="d-flex justify-content-center bg-200 mb-2">
<div class="p-2 bg-300 border border-400">Flex Item</div>
</div>
<div class="d-flex justify-content-between bg-200 mb-2">
<div class="p-2 bg-300 border border-400">Flex Item</div>
</div>
<div class="d-flex justify-content-around bg-200 mb-2">
<div class="p-2 bg-300 border border-400">Flex Item</div>
</div>
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-items-start bg-200 mb-2" style="height: 5rem;">
<div class="p-2 bg-300 border border-400">Flex item</div>
</div>
<div class="d-flex align-items-end bg-200 mb-2" style="height: 5rem;">
<div class="p-2 bg-300 border border-400">Flex item</div>
</div>
<div class="d-flex align-items-center bg-200 mb-2" style="height: 5rem;">
<div class="p-2 bg-300 border border-400">Flex item</div>
</div>
<div class="d-flex align-items-baseline bg-200 mb-2" style="height: 5rem;">
<div class="p-2 bg-300 border border-400">Flex item</div>
</div>
<div class="d-flex align-items-stretch bg-200 mb-2" style="height: 5rem;">
<div class="p-2 bg-300 border border-400">Flex item</div>
</div>
Flex Item
Align self start
Flex Item
Flex Item
Align self end
Flex Item
Flex Item
Align self center
Flex Item
Flex Item
Align self baseline
Flex Item
Flex Item
Align self stretch
Flex Item
<div class="d-flex bg-200 mb-2" style="height: 5rem;">
<div class="border border-400 p-2 bg-300">Flex Item</div>
<div class="border border-400 p-2 bg-300 align-self-start">Align self start</div>
<div class="border border-400 p-2 bg-300">Flex Item</div>
</div>
<div class="d-flex bg-200 mb-2" style="height: 5rem;">
<div class="border border-400 p-2 bg-300">Flex Item</div>
<div class="border border-400 p-2 bg-300 align-self-end">Align self end</div>
<div class="border border-400 p-2 bg-300">Flex Item</div>
</div>
<div class="d-flex bg-200 mb-2" style="height: 5rem;">
<div class="border border-400 p-2 bg-300">Flex Item</div>
<div class="border border-400 p-2 bg-300 align-self-center">Align self center</div>
<div class="border border-400 p-2 bg-300">Flex Item</div>
</div>
<div class="d-flex bg-200 mb-2" style="height: 5rem;">
<div class="border border-400 p-2 bg-300">Flex Item</div>
<div class="border border-400 p-2 bg-300 align-self-baseline">Align self baseline</div>
<div class="border border-400 p-2 bg-300">Flex Item</div>
</div>
<div class="d-flex bg-200 mb-2" style="height: 5rem;">
<div class="border border-400 p-2 bg-300">Flex Item</div>
<div class="border border-400 p-2 bg-300 align-self-stretch">Align self stretch</div>
<div class="border border-400 p-2 bg-300">Flex Item</div>
</div>
Flex item with a lot of content
Flex item
Flex item
<div class="d-flex bg-200">
<div class="p-2 flex-fill bg-300 border border-400">Flex item with a lot of content</div>
<div class="p-2 flex-fill bg-300 border border-400">Flex item</div>
<div class="p-2 flex-fill bg-300 border border-400">Flex item</div>
</div>
Flex item
Flex item
Third flex item
<div class="d-flex bg-200">
<div class="p-2 flex-grow-1 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Third flex item</div>
</div>
Flex item
Flex item
<div class="d-flex bg-200">
<div class="p-2 w-100 bg-300 border border-400">Flex item</div>
<div class="p-2 flex-shrink-1 bg-300 border border-400">Flex item</div>
</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex bg-200 mb-2">
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
</div>
<div class="d-flex bg-200 mb-2">
<div class="me-auto p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
</div>
<div class="d-flex bg-200 mb-2">
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="ms-auto p-2 bg-300 border border-400">Flex item</div>
</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex flex-column bg-200 mb-3 align-items-start" style="height: 200px;">
<div class="mb-auto p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
</div>
<div class="d-flex flex-column bg-200 mb-3 align-items-end" style="height: 200px;">
<div class="mb-auto p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex flex-nowrap mb-3 bg-200 border border-300 py-3" style="width: 8rem">
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
</div>
<div class="d-flex mb-3 bg-200 border border-300 flex-wrap">
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
</div>
<div class="d-flex mb-3 bg-200 border border-300 flex-wrap-reverse">
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
</div>
First flex item
Second flex item
Third flex item
<div class="d-flex flex-nowrap bg-200">
<div class="order-3 p-2 bg-300 border border-400">First flex item</div>
<div class="order-2 p-2 bg-300 border border-400">Second flex item</div>
<div class="order-1 p-2 bg-300 border border-400">Third flex item</div>
</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex flex-wrap bg-200 mb-3 align-content-start" style="height: 300px;">
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
</div>
<div class="d-flex flex-wrap bg-200 mb-3 align-content-center" style="height: 300px;">
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
</div>
<div class="d-flex flex-wrap bg-200 mb-3 align-content-end" style="height: 300px;">
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
</div>
<div class="d-flex flex-wrap bg-200 mb-3 align-content-between" style="height: 300px;">
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
</div>
<div class="d-flex flex-wrap bg-200 mb-3 align-content-around" style="height: 300px;">
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
</div>
<div class="d-flex flex-wrap bg-200 mb-3 align-content-stretch" style="height: 300px;">
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
<div class="p-2 bg-300 border border-400">Flex item</div>
</div>