Bootstrap 4 Flex


Basic Flex

Use the Flex class to control the formatting of Bootstrap 4 components.

To create a flexbox holder and convert it directly into kids flex items, use the .d-flex class:

Flex Item 1
Flex Item 2
Flex Item 3

Example Code

<div class="d-flex bg-dark text-white p-2">
<div class="bg-primary p-2">Flex Item 1</div>
<div class="bg-secondary p-2">Flex Item 2</div>
<div class="bg-info p-2">Flex Item 3</div>
</div>

Inline Flex

.d-inline-flex class use to create inline flex box container.

Flex Item 1
Flex Item 2
Flex Item 3

Example Code

<div class="d-inline-flex bg-dark text-white p-2">
<div class="bg-primary p-2">Flex Item 1</div>
<div class="bg-secondary p-2">Flex Item 2</div>
<div class="bg-info p-2">Flex Item 3</div>
</div>

Horizontal Direction Flex

.flex-row class are used to display the flex items horizontally (side by side).

.flex-row-reverse class are used to right-align the horizontal direction

Flex Item 1
Flex Item 2
Flex Item 3
Flex Item 1
Flex Item 2
Flex Item 3

Example Code

<div class="d-flex flex-row bg-dark text-white p-2 mb-2">
<div class="bg-primary p-2">Flex Item 1</div>
<div class="bg-secondary p-2">Flex Item 2</div>
<div class="bg-info p-2">Flex Item 3</div>
</div>

<div class="d-flex flex-row-reverse bg-dark text-white p-2">
<div class="bg-primary p-2">Flex Item 1</div>
<div class="bg-secondary p-2">Flex Item 2</div>
<div class="bg-info p-2">Flex Item 3</div>
</div>

Vertical Direction Flex

.flex-column class are used to display the flex items verticallly.

.flex-column-reverse class are used to right-align the vertical direction.

Flex Item 1
Flex Item 2
Flex Item 3
Flex Item 1
Flex Item 2
Flex Item 3

Example Code

<div class="d-flex flex-column bg-dark text-white p-2 mb-2">
<div class="bg-primary p-2">Flex Item 1</div>
<div class="bg-secondary p-2">Flex Item 2</div>
<div class="bg-info p-2">Flex Item 3</div>
</div>

<div class="d-flex flex-column-reverse bg-dark text-white p-2">
<div class="bg-primary p-2">Flex Item 1</div>
<div class="bg-secondary p-2">Flex Item 2</div>
<div class="bg-info p-2">Flex Item 3</div>
</div>

Justify Flex Content

Flex Item 1
Flex Item 2
Flex Item 3
Flex Item 1
Flex Item 2
Flex Item 3
Flex Item 1
Flex Item 2
Flex Item 3
Flex Item 1
Flex Item 2
Flex Item 3
Flex Item 1
Flex Item 2
Flex Item 3

Example Code

<div class="d-flex justify-content-start bg-dark text-white p-2 mb-2">
<div class="bg-primary p-2">Flex Item 1</div>
<div class="bg-secondary p-2">Flex Item 2</div>
<div class="bg-info p-2">Flex Item 3</div>
</div>

<div class="d-flex justify-content-end mb-2 bg-dark text-white p-2">
<div class="bg-primary p-2">Flex Item 1</div>
<div class="bg-secondary p-2">Flex Item 2</div>
<div class="bg-info p-2">Flex Item 3</div>
</div>

<div class="d-flex justify-content-between mb-2 bg-dark text-white p-2">
<div class="bg-primary p-2">Flex Item 1</div>
<div class="bg-secondary p-2">Flex Item 2</div>
<div class="bg-info p-2">Flex Item 3</div>
</div>

<div class="d-flex justify-content-center mb-2 bg-dark text-white p-2">
<div class="bg-primary p-2">Flex Item 1</div>
<div class="bg-secondary p-2">Flex Item 2</div>
<div class="bg-info p-2">Flex Item 3</div>
</div>

<div class="d-flex justify-content-around bg-dark text-white p-2">
<div class="bg-primary p-2">Flex Item 1</div>
<div class="bg-secondary p-2">Flex Item 2</div>
<div class="bg-info p-2">Flex Item 3</div>
</div>

Equal Width Flex Items

Flex Item 1
Flex Item 2
Flex Item 3

Example Code

<div class="d-flex  bg-dark text-white p-2">
<div class="bg-primary flex-fill p-2">Flex Item 1</div>
<div class="bg-secondary p-2 flex-fill">Flex Item 2</div>
<div class="bg-info p-2 flex-fill">Flex Item 3</div>
</div>

Grow Flex Items

.flex-grow-1 class is used to flex items to take up the rest of the space. In the example below, the first three flex items take up their necessary space, while the last item takes up the rest of the available space:

Flex Item 1
Flex Item 2
Flex Item 3
Flex Item 4

Example Code

<div class="d-flex  bg-dark text-white p-2">
<div class="bg-primary  p-2">Flex Item 1</div>
<div class="bg-secondary p-2 ">Flex Item 2</div>
<div class="bg-info p-2 ">Flex Item 3</div>
<div class="bg-success p-2 flex-grow-1">Flex Item 4</div>
</div>

Ordering Flex Items

.order-* Classes can be used to change the visual order of any specific flex item. These classes range from 0-12.

Flex Item 1
Flex Item 2
Flex Item 3
Flex Item 4

Example Code

<div class="d-flex  bg-dark text-white p-2">
<div class="bg-primary  p-2 order-3">Flex Item 1</div>
<div class="bg-secondary p-2 order-1">Flex Item 2</div>
<div class="bg-info p-2 order-2">Flex Item 3</div>
<div class="bg-success p-2 order-4">Flex Item 4</div>
</div>