<div class="d-flex p-2">I'm a flexbox container!</div>
<div class="d-inline-flex p-2">I'm an inline flexbox container!</div><div class="d-flex flex-row mb-3">
<div class="p-2 bg-primary-subtle">Flex item 1</div>
<div class="p-2 bg-primary-subtle">Flex item 2</div>
<div class="p-2 bg-primary-subtle">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
<div class="p-2 bg-primary-subtle">Flex item 1</div>
<div class="p-2 bg-primary-subtle">Flex item 2</div>
<div class="p-2 bg-primary-subtle">Flex item 3</div>
</div> <div class="d-flex justify-content-start mb-3">
<div class="p-2 bg-primary-subtle">Justify</div>
<div class="p-2 bg-primary-subtle">Content</div>
<div class="p-2 bg-primary-subtle">Start</div>
</div>
<div class="d-flex justify-content-end mb-3">
<div class="p-2 bg-primary-subtle">Justify</div>
<div class="p-2 bg-primary-subtle">Content</div>
<div class="p-2 bg-primary-subtle">End</div>
</div>
<div class="d-flex justify-content-center mb-3">
<div class="p-2 bg-primary-subtle">Justify</div>
<div class="p-2 bg-primary-subtle">Content</div>
<div class="p-2 bg-primary-subtle">Center</div>
</div>
<div class="d-flex justify-content-between mb-3">
<div class="p-2 bg-primary-subtle">Justify</div>
<div class="p-2 bg-primary-subtle">Content</div>
<div class="p-2 bg-primary-subtle">Between</div>
</div>
<div class="d-flex justify-content-around mb-3">
<div class="p-2 bg-primary-subtle">Justify</div>
<div class="p-2 bg-primary-subtle">Content</div>
<div class="p-2 bg-primary-subtle">Around</div>
</div>
<div class="d-flex justify-content-evenly">
<div class="p-2 bg-primary-subtle">Justify</div>
<div class="p-2 bg-primary-subtle">Content</div>
<div class="p-2 bg-primary-subtle">Evenly</div>
</div><div class="d-flex align-items-start mb-3" style="height: 100px">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex align-items-end mb-3" style="height: 100px">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex align-items-center mb-3" style="height: 100px">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex align-items-baseline mb-3" style="height: 100px">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex align-items-stretch" style="height: 100px">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div><div class="d-flex mb-3" style="height: 100px">
<div class="p-2">Flex item</div>
<div class="align-self-start p-2">Aligned flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex mb-3" style="height: 100px">
<div class="p-2">Flex item</div>
<div class="align-self-end p-2">Aligned flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex mb-3" style="height: 100px">
<div class="p-2">Flex item</div>
<div class="align-self-center p-2">Aligned flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex mb-3" style="height: 100px">
<div class="p-2">Flex item</div>
<div class="align-self-baseline p-2">Aligned flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex" style="height: 100px">
<div class="p-2">Flex item</div>
<div class="align-self-stretch p-2">Aligned flex item</div>
<div class="p-2">Flex item</div>
</div><div class="d-flex">
<div class="p-2 flex-fill">Flex item with a lot of content</div>
<div class="p-2 flex-fill">Flex item</div>
<div class="p-2 flex-fill">Flex item</div>
</div><div class="d-flex">
<div class="p-2 flex-grow-1">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Third flex item</div>
</div><div class="d-flex mb-3">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex mb-3">
<div class="me-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex mb-3">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="ms-auto p-2">Flex item</div>
</div> <div class="d-flex align-items-start flex-column mb-3" style="height: 200px;">
<div class="mb-auto p-2 bg-primary-subtle">Flex item</div>
<div class="p-2 bg-primary-subtle">Flex item</div>
<div class="p-2 bg-primary-subtle">Flex item</div>
</div>
<div class="d-flex align-items-end flex-column mb-3" style="height: 200px;">
<div class="p-2 bg-primary-subtle">Flex item</div>
<div class="p-2 bg-primary-subtle">Flex item</div>
<div class="mt-auto p-2 bg-primary-subtle">Flex item</div>
</div> <div class="d-flex flex-nowrap" style="width: 8rem;">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex flex-wrap">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
<div class="p-2">Flex item 4</div>
<div class="p-2">Flex item 5</div>
<div class="p-2">Flex item 6</div>
<div class="p-2">Flex item 7</div>
<div class="p-2">Flex item 8</div>
<div class="p-2">Flex item 9</div>
<div class="p-2">Flex item 10</div>
<div class="p-2">Flex item 11</div>
<div class="p-2">Flex item 12</div>
<div class="p-2">Flex item 13</div>
<div class="p-2">Flex item 14</div>
</div>
<div class="d-flex flex-wrap-reverse">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
<div class="p-2">Flex item 4</div>
<div class="p-2">Flex item 5</div>
<div class="p-2">Flex item 6</div>
<div class="p-2">Flex item 7</div>
<div class="p-2">Flex item 8</div>
<div class="p-2">Flex item 9</div>
<div class="p-2">Flex item 10</div>
<div class="p-2">Flex item 11</div>
<div class="p-2">Flex item 12</div>
<div class="p-2">Flex item 13</div>
<div class="p-2">Flex item 14</div>
</div> <div class="d-flex flex-nowrap">
<div class="order-3 p-2">First flex item</div>
<div class="order-2 p-2">Second flex item</div>
<div class="order-1 p-2">Third flex item</div>
</div> <div class="d-flex align-content-start flex-wrap mb-3" style="height: 200px">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex align-content-end flex-wrap mb-3" style="height: 200px">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex align-content-center flex-wrap mb-3" style="height: 200px">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex align-content-between flex-wrap mb-3" style="height: 200px">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex align-content-around flex-wrap mb-3" style="height: 200px">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex align-content-stretch flex-wrap mb-3" style="height: 200px">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>