Usage

To start with, the container or parent of the items you want to be flexible needs the d-flex or d-inline-flex classes. Inline flex makes the flex container display inline, which is the only difference between the two.
You are able to turn flex on and off at various viewports, this is done by using d-{breakpoint}-flex, see below.

Note: If you need help with anything flexboxy related, check out our friends at CSS Tricks for more details.

d-flex

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

d-inline-flex

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

Responsive variations:

<!-- Default -->
<div class="d-flex"></div>
<div class="d-inline-flex"></div>
<!-- Mobile -->
<div class="d-mob-flex"></div>
<div class="d-mob-inline-flex"></div>
<!-- Tablet -->
<div class="d-tab-flex"></div>
<div class="d-tab-inline-flex"></div>
<!-- Desktop -->
<div class="d-desk-flex"></div>
<div class="d-desk-inline-flex"></div>
<!-- HD -->
<div class="d-hd-flex"></div>
<div class="d-hd-inline-flex"></div>

Direction

Flex direction establishes the main axis, which ultimately defines the direction the flex items are placed in the flex container. By default d-flex establishes a flex direction of row.

Direction options:

You can change this behaviour by using flex-{breakpoint}-row or flex-{modifier}-column. The modifier being optional and one of our five breakpoints.
Reverse direction is also possible, where flex-{breakpoint}-row-reverse will change the flex items to become right to left.
Or flex-{breakpoint}-column-reverse will change the flex items to go from bottom to top.

Row:

Here, the flex direction goes from left to right or right to left.

`d-flex`

1

2

3

4

5

<div class="d-flex">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
</div>

`flex-row-reverse`

1

2

3

4

5

<div class="d-flex flex-row-reverse">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
</div>

Column

Here, the flex direction goes from top to bottom or bottom to top.

1

2

3

4

5

1

2

3

4

5

        <div class="d-flex flex-column">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
</div>
<div class="d-flex flex-column">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
</div>

Responsive variations:

<!-- Default -->
<div class="flex-row"></div>
<div class="flex-row-reverse"></div>
<div class="flex-column"></div>
<div class="flex-column-reverse"></div>
<!-- Mobile -->
<div class="flex-mob-row"></div>
<div class="flex-mob-row-reverse"></div>
<div class="flex-mob-column"></div>
<div class="flex-mob-column-reverse"></div>
<!-- Tablet -->
<div class="flex-tab-row"></div>
<div class="flex-tab-row-reverse"></div>
<div class="flex-tab-column"></div>
<div class="flex-tab-column-reverse"></div>
<!-- Desktop -->
<div class="flex-desk-row"></div>
<div class="flex-desk-row-reverse"></div>
<div class="flex-desk-column"></div>
<div class="flex-desk-column-reverse"></div>
<!-- HD -->
<div class="flex-hd-row"></div>
<div class="flex-hd-row-reverse"></div>
<div class="flex-hd-column"></div>
<div class="flex-hd-column-reverse"></div>

Justify content

This defines the alignment across the main axis, it allows us to distribute space between the flex content within the flex container. If the flex direction is row, the alignment will be on the x-axis, if flex direction is column, alignment will be on the y-axis.
Target justify content using justify-content-{breakpoint}-{property} where property is one of five listed below.

Justify content options:

start (flex-start) - is the default, all items will be aligned to the beginning of the flex container
end (flex-end) - means all items will be aligned to the end of the flex container.
center (center) - aligns all items in the center of the flex container.
between (space-between) - spaces the items evenly in the flex container, without space on the left side on the first block and right hand side of the last block.
around (space-around) - spaces the items evenly in the flex container, with space on the left side on the first block and right hand side of the last block.
evenly (space-evenly) - spaces the items evenly in the flex container, with space equally distributed on the left side on the first block and right hand side of the last block.

`justify-content-start (default)`

1

2

3

4

5

`justify-content-end`

1

2

3

4

5

`justify-content-center`

1

2

3

4

5

`justify-content-between`

1

2

3

4

5

`justify-content-around`

1

2

3

4

5

`justify-content-evenly`

1

2

3

4

5

Responsive variations:

<!-- Default -->
<div class="d-flex justify-content-start"></div>
<div class="d-flex justify-content-end"></div>
<div class="d-flex justify-content-center"></div>
<div class="d-flex justify-content-between"></div>
<div class="d-flex justify-content-around"></div>
<div class="d-flex justify-content-evenly"></div>
<!-- Mobile -->
<div class="d-flex justify-content-mob-start"></div>
<div class="d-flex justify-content-mob-end"></div>
<div class="d-flex justify-content-mob-center"></div>
<div class="d-flex justify-content-mob-between"></div>
<div class="d-flex justify-content-mob-around"></div>
<div class="d-flex justify-content-mob-evenly"></div>
<!-- Tablet -->
<div class="d-flex justify-content-tab-start"></div>
<div class="d-flex justify-content-tab-end"></div>
<div class="d-flex justify-content-tab-center"></div>
<div class="d-flex justify-content-tab-between"></div>
<div class="d-flex justify-content-tab-around"></div>
<div class="d-flex justify-content-tab-evenly"></div>
<!-- Desktop -->
<div class="d-flex justify-content-desk-start"></div>
<div class="d-flex justify-content-desk-end"></div>
<div class="d-flex justify-content-desk-center"></div>
<div class="d-flex justify-content-desk-between"></div>
<div class="d-flex justify-content-desk-around"></div>
<div class="d-flex justify-content-desk-evenly"></div>
<!-- HD -->
<div class="d-flex justify-content-hd-start"></div>
<div class="d-flex justify-content-hd-end"></div>
<div class="d-flex justify-content-hd-center"></div>
<div class="d-flex justify-content-hd-between"></div>
<div class="d-flex justify-content-hd-around"></div>
<div class="d-flex justify-content-hd-evenly"></div>

Align items

This defines the alignment along the cross axis, which defines how how the flex items are laid out perpendicular from the main axis.
This means that if the flex direction is set to row, it will align the items vertically, and if it is set to column, it will align the items horizontally.
Target justify content using align-items-{breakpoint}-{property} where property is one of five listed below.

Align items options:

stretch (stretch) - is the default, all items will stretch to fit the flex container whilst still respecting min-width and max-width properties.
start (flex-start) - means all items will be aligned to the start of the flex container, on the cross axis.
end (flex-end) - all items will be aligned to the end of the flex container, on the cross axis.
center (center) - aligns all items in the center of the flex container.
baseline (baseline) - aligns flex items along their contents baseline.

`align-items-stretch (default)`

1

2

3

4

5

`align-items-start`

1

2

3

4

5

`align-items-end`

1

2

3

4

5

`align-items-center`

1

2

3

4

5

`align-items-baseline`

1

2

3

4

5

Responsive variations:

<!-- Default -->
<div class="d-flex align-items-stretch"></div>
<div class="d-flex align-items-start"></div>
<div class="d-flex align-items-end"></div>
<div class="d-flex align-items-center"></div>
<div class="d-flex align-items-baseline"></div>
<!-- Mobile -->
<div class="d-flex align-items-mob-stretch"></div>
<div class="d-flex align-items-mob-start"></div>
<div class="d-flex align-items-mob-end"></div>
<div class="d-flex align-items-mob-center"></div>
<div class="d-flex align-items-mob-baseline"></div>
<!-- Tablet -->
<div class="d-flex align-items-tab-stretch"></div>
<div class="d-flex align-items-tab-start"></div>
<div class="d-flex align-items-tab-end"></div>
<div class="d-flex align-items-tab-center"></div>
<div class="d-flex align-items-tab-baseline"></div>
<!-- Desktop -->
<div class="d-flex align-items-desk-stretch"></div>
<div class="d-flex align-items-desk-start"></div>
<div class="d-flex align-items-desk-end"></div>
<div class="d-flex align-items-desk-center"></div>
<div class="d-flex align-items-desk-baseline"></div>
<!-- HD -->
<div class="d-flex align-items-hd-stretch"></div>
<div class="d-flex align-items-hd-start"></div>
<div class="d-flex align-items-hd-end"></div>
<div class="d-flex align-items-hd-center"></div>
<div class="d-flex align-items-hd-baseline"></div>

Align self

This allows us to target a singular flex item on the cross axis with respect to the flex direction.
If the flex direction is set to row, it will align the items vertically, and if it is set to column, it will align the items horizontally.
Target justify content using align-self-{breakpoint}-{property} where property is one of five listed below.
All properties are the same as align-items.

`align-self-stretch`

1

2

3

4

5

<div class="d-flex align-items-center">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item align-self-stretch">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
</div>

`align-self-start`

1

2

3

4

5

<div class="d-flex align-items-end">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item align-self-start">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
</div>

`align-self-end`

1

2

3

4

5

<div class="d-flex align-items-start">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item align-self-end">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
</div>

`align-self-center`

1

2

3

4

5

<div class="d-flex align-items-start">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item align-self-end">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
</div>

`align-self-baseline`

1

2

3

4

5

<div class="d-flex align-items-end">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item align-self-baseline">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
</div>

Responsive variations:

<!-- Default -->
<div class="d-flex align-self-stretch"></div>
<div class="d-flex align-self-start"></div>
<div class="d-flex align-self-end"></div>
<div class="d-flex align-self-center"></div>
<div class="d-flex align-self-baseline"></div>
<!-- Mobile -->
<div class="d-flex align-self-mob-stretch"></div>
<div class="d-flex align-self-mob-start"></div>
<div class="d-flex align-self-mob-end"></div>
<div class="d-flex align-self-mob-center"></div>
<div class="d-flex align-self-mob-baseline"></div>
<!-- Tablet -->
<div class="d-flex align-self-tab-stretch"></div>
<div class="d-flex align-self-tab-start"></div>
<div class="d-flex align-self-tab-end"></div>
<div class="d-flex align-self-tab-center"></div>
<div class="d-flex align-self-tab-baseline"></div>
<!-- Desktop -->
<div class="d-flex align-self-desk-stretch"></div>
<div class="d-flex align-self-desk-start"></div>
<div class="d-flex align-self-desk-end"></div>
<div class="d-flex align-self-desk-center"></div>
<div class="d-flex align-self-desk-baseline"></div>
<!-- HD -->
<div class="d-flex align-self-hd-stretch"></div>
<div class="d-flex align-self-hd-start"></div>
<div class="d-flex align-self-hd-end"></div>
<div class="d-flex align-self-hd-center"></div>
<div class="d-flex align-self-hd-baseline"></div>

Align content

This allows us to align to line flex items when there is space left over in the cross axis, very similar to justify-content.
if the flex direction is set to row, it will align the items vertically, and if it is set to column, it will align the items horizontally.
Target justify content using align-content-{breakpoint}-{property} where property is one of five listed below.
All properties are the same as justify-content.

`align-content-start`

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<div class="d-flex align-content-start flex-wrap">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    ...
</div>

`align-content-end`

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<div class="d-flex align-content-end flex-wrap">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    ...
</div>

`align-content-center`

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<div class="d-flex align-content-center flex-wrap">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    ...
</div>

`align-content-between`

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<div class="d-flex align-content-between flex-wrap">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    ...
</div>

`align-content-around`

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<div class="d-flex align-content-around flex-wrap">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    ...
</div>

`align-content-stretch`

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<div class="d-flex align-content-stretch flex-wrap">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    ...
</div>

Responsive variations:

<!-- Default -->
<div class="d-flex align-content-start"></div>
<div class="d-flex align-content-end"></div>
<div class="d-flex align-content-center"></div>
<div class="d-flex align-content-between"></div>
<div class="d-flex align-content-around"></div>
<div class="d-flex align-content-stretch"></div>
<!-- Mobile -->
<div class="d-flex align-content-mob-start"></div>
<div class="d-flex align-content-mob-end"></div>
<div class="d-flex align-content-mob-center"></div>
<div class="d-flex align-content-mob-between"></div>
<div class="d-flex align-content-mob-around"></div>
<div class="d-flex align-content-mob-stretch"></div>
<div class="d-flex align-content-tab-start"></div>
<!-- Tablet -->
<div class="d-flex align-content-tab-end"></div>
<div class="d-flex align-content-tab-center"></div>
<div class="d-flex align-content-tab-between"></div>
<div class="d-flex align-content-tab-around"></div>
<div class="d-flex align-content-tab-stretch"></div>
<!-- Desktop -->
<div class="d-flex align-content-desk-start"></div>
<div class="d-flex align-content-desk-end"></div>
<div class="d-flex align-content-desk-center"></div>
<div class="d-flex align-content-desk-between"></div>
<div class="d-flex align-content-desk-around"></div>
<div class="d-flex align-content-desk-stretch"></div>
<!-- HD -->
<div class="d-flex align-content-hd-start"></div>
<div class="d-flex align-content-hd-end"></div>
<div class="d-flex align-content-hd-center"></div>
<div class="d-flex align-content-hd-between"></div>
<div class="d-flex align-content-hd-around"></div>
<div class="d-flex align-content-hd-stretch"></div>

Wrap & fill

Wrap

By default, flex items will always fit on one line, but you can change this property with flex-wrap, which allows flex items to 'wrap' to the next line.

Wrap options:

Add flex-{breakpoint}-wrap for flex items to wrap to the next line. The breakpoint is optional.
Add flex-{breakpoint}-nowrap to prevent flex items from wrapping. The breakpoint is optional but you would usually use this with a responsive class.
Add flex-{breakpoint}-wrap-reverse in order for the flex items to wrap on multiple lines from top to bottom.

`flex-wrap`

1

2

3

4

5

<div class="d-flex justify-content-center flex-wrap">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
</div>

`flex-nowrap`

1

2

3

4

5

<div class="d-flex flex-nowrap">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
</div>

`flex-wrap-reverse`

1

2

3

4

5

<div class="d-flex justify-content-center flex-wrap-reverse">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
</div>

Responsive variations:

<!-- Default -->
<div class="d-flex flex-wrap"></div>
<div class="d-flex flex-nowrap"></div>
<div class="d-flex flex-wrap-reverse"></div>
<!-- Mobile -->
<div class="d-flex flex-mob-wrap"></div>
<div class="d-flex flex-mob-nowrap"></div>
<div class="d-flex flex-mob-wrap-reverse"></div>
<!-- Tablet -->
<div class="d-flex flex-tab-wrap"></div>
<div class="d-flex flex-tab-nowrap"></div>
<div class="d-flex flex-tab-wrap-reverse"></div>
<!-- Desktop -->
<div class="d-flex flex-desk-wrap"></div>
<div class="d-flex flex-desk-nowrap"></div>
<div class="d-flex flex-desk-wrap-reverse"></div>
<!-- HD -->
<div class="d-flex flex-hd-wrap"></div>
<div class="d-flex flex-hd-nowrap"></div>
<div class="d-flex flex-hd-wrap-reverse"></div>

Fill

The flex fill class is set to fill the remaining space of the container. Its used by adding the flex-{breakpoint}-fill class to the flexible child.

1

2

3

4

5

<div class="d-flex">
    <div class="flex-item flex-fill">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
</div>

Responsive variations:

<div class="flex-fill"></div>
<div class="flex-mob-fill"></div>
<div class="flex-tab-fill"></div>
<div class="flex-desk-fill"></div>
<div class="flex-hd-fill"></div>

Grow & shrink

Grow

The grow property defines the ability for an a flex child to grow within the flex container, the default is set to 0. You can target the flex grow properties by using the flex-{breakpoint}-grow-{amount} class where the breakpoint is optional and the amount is either 0 or 1.

1

2

3

4

5

<div class="d-flex">
    <div class="flex-item">1</div>
    <div class="flex-item flex-grow-1">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
</div>

Shrink

The shrink property defines the ability for a flex child to shrink within the flex container, the default is set to 0. You can target the flex shrink properties by using the flex-{breakpoint}-shrink-{amount} class where the breakpoint is optional and the amount is either 0 or 1.

1

2

3

4

5

<div class="d-flex">
<div class="flex-item flex-grow-1">1</div>
<div class="flex-item flex-shrink-1">2</div>
<div class="flex-item flex-grow-1">3</div>
<div class="flex-item flex-grow-1">4</div>
<div class="flex-item flex-grow-1">5</div>
</div>

Responsive variations:

<!-- Default -->
<div class="d-flex flex-grow-0"></div>
<div class="d-flex flex-grow-1"></div>
<div class="d-flex flex-shrink-0"></div>
<div class="d-flex flex-shrink-1"></div>
<!-- Mobile -->
<div class="d-flex flex-mob-grow-0"></div>
<div class="d-flex flex-mob-grow-1"></div>
<div class="d-flex flex-mob-shrink-0"></div>
<div class="d-flex flex-mob-shrink-1"></div>
<!-- Tablet -->
<div class="d-flex flex-tab-grow-0"></div>
<div class="d-flex flex-tab-grow-1"></div>
<div class="d-flex flex-tab-shrink-0"></div>
<div class="d-flex flex-tab-shrink-1"></div>
<!-- Desktop -->
<div class="d-flex flex-desk-grow-0"></div>
<div class="d-flex flex-desk-grow-1"></div>
<div class="d-flex flex-desk-shrink-0"></div>
<div class="d-flex flex-desk-shrink-1"></div>
<!-- HD -->
<div class="d-flex flex-hd-grow-0"></div>
<div class="d-flex flex-hd-grow-1"></div>
<div class="d-flex flex-hd-shrink-0"></div>
<div class="d-flex flex-hd-shrink-1"></div>