Flex

Enable flex behavior

Use classes .d-flex and .d-inline-flex to display an element, like a div, as a flexbox.

.d-flex	display: flex;
.d-inline-flex	display: inline-flex;

The classes can be responsive using breakpoints {sm|md|lg|xl}.

.d-{breakpoint}-flex
.d-{breakpoint}-inline-flex

I'm a flexbox container!

<div class="d-flex bg-primary text-white p-2">I'm a flexbox container!</div>
<div class="d-inline-flex bg-primary text-white p-2">I'm a flexbox container!</div>

Direction

Flex Row

Use .flex-row to set a horizontal direction (the browser default), or .flex-row-reverse to start the horizontal direction from the opposite side.

.flex-row	flex-direction: row;
.flex-row-reverse	flex-direction: row-reverse;
.flex-column	flex-direction: column;
.flex-column-reverse	flex-direction: column-reverse;

The classes can be responsive using breakpoints {sm|md|lg|xl}.

.flex-{breakpoint}-row
.flex-{breakpoint}-row-reversed
.flex-{breakpoint}-column
.flex-{breakpoint}-column-reversed

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

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

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

Flex Column

Use .flex-column to set a vertical direction, or .flex-column-reverse to start the vertical direction from the opposite side.

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

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

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

Justify content

.justify-content-start	justify-content: flex-start;
.justify-content-end	justify-content: flex-end;
.justify-content-center	justify-content: center;
.justify-content-between	justify-content: space-between;
.justify-content-around	justify-content: space-around;

The classes can be responsive using breakpoints {sm|md|lg|xl}.

.justify-content-{breakpoint}-start
.justify-content-{breakpoint}-end
.justify-content-{breakpoint}-center
.justify-content-{breakpoint}-between
.justify-content-{breakpoint}-around

Flex item

<div class="d-flex justify-content-start bg-primary">
    <div class="p-2 bg-secondary text-white">Flex item</div>
    <div class="p-2 bg-secondary text-white">Flex item</div>
    <div class="p-2 bg-secondary text-white">Flex item</div>
</div>

<div class="d-flex justify-content-end bg-primary">...</div>
<div class="d-flex justify-content-center bg-primary">...</div>
<div class="d-flex justify-content-between bg-primary">...</div>
<div class="d-flex justify-content-around bg-primary">...</div>

Align items

.align-items-start	align-items: flex-start;
.align-items-end	align-items: flex-end;
.align-items-center	align-items: center;
.align-items-baseline	align-items: baseline;
.align-items-stretch	align-items: stretch;

The classes can be responsive using breakpoints {sm|md|lg|xl}.

.align-items-{breakpoint}-start
.align-items-{breakpoint}-end
.align-items-{breakpoint}-center
.align-items-{breakpoint}-baseline
.align-items-{breakpoint}-stretch

Flex item

<div class="d-flex align-items-start bg-primary">
    <div class="p-2 bg-secondary text-white">Flex item</div>
    <div class="p-2 bg-secondary text-white">Flex item</div>
    <div class="p-2 bg-secondary text-white">Flex item</div>
</div>

<div class="d-flex align-items-end bg-primary">...</div>
<div class="d-flex align-items-center bg-primary">...</div>
<div class="d-flex align-items-baseline bg-primary">...</div>
<div class="d-flex align-items-stretch bg-primary">...</div>

Align self

.align-self-start	align-self: flex-start;
.align-self-end	align-self: flex-end;
.align-self-center	align-self: center;
.align-self-baseline	align-self: baseline;
.align-self-stretch	align-self: stretch;
.align-self-auto	align-self: auto;

The classes can be responsive using breakpoints {sm|md|lg|xl}.

.align-self-{breakpoint}-start
.align-self-{breakpoint}-end
.align-self-{breakpoint}-center
.align-self-{breakpoint}-baseline
.align-self-{breakpoint}-stretch

Flex item

<div class="d-flex align-items-stretch bg-primary">
    <div class="p-2 bg-secondary text-white border">Flex item</div>
    <div class="p-2 align-self-start bg-secondary text-white border">Flex item</div>
    <div class="p-2 bg-secondary text-white border">Flex item</div>
</div>

    <div class="p-2 align-self-end bg-secondary text-white">...</div>
    <div class="p-2 align-self-center bg-secondary text-white">...</div>
    <div class="p-2 align-self-baseline bg-secondary text-white">...</div>
    <div class="p-2 align-self-stretch bg-secondary text-white">...</div>

Fill

.flex-fill

flex: 1 1 auto;

The classes can be responsive using breakpoints {sm|md|lg|xl}.

.flex-{breakpoint}-fill

Flex item with a lot of content

Flex item

<div class="d-flex bg-primary">
    <div class="p-2 flex-fill bg-secondary text-white border">Flex item with a lot of content</div>
    <div class="p-2 flex-fill bg-secondary text-white border">Flex item</div>
    <div class="p-2 flex-fill bg-secondary text-white border">Flex item</div>
</div>

Grow and shrink

.flex-grow-0	flex-grow: 0;
.flex-grow-1	flex-grow: 1;
.flex-shrink-0	flex-shrink: 0;
.flex-shrink-1	flex-shrink: 1;

The classes can be responsive using breakpoints {sm|md|lg|xl}.

.flex-{breakpoint}-grow-0
.flex-{breakpoint}-grow-1
.flex-{breakpoint}-shrink-0
.flex-{breakpoint}-shrink-1

Flex item

Third flex item

Flex item

<div class="d-flex bg-primary">
    <div class="p-2 flex-grow-1 bg-secondary text-white border">Flex item</div>
    <div class="p-2 bg-secondary text-white border">Flex item</div>
    <div class="p-2 bg-secondary text-white border">Third flex item</div>
</div>

<div class="d-flex bg-primary">
    <div class="p-2 w-100 bg-secondary text-white border">Flex item</div>
    <div class="p-2 flex-shrink-1 bg-secondary text-white border">Flex item</div>
</div>

Wrap

.flex-wrap	flex-wrap: wrap;
.flex-nowrap	flex-wrap: nowrap;
.flex-wrap-reverse	flex-wrap: wrap-reverse;

The classes can be responsive using breakpoints {sm|md|lg|xl}.

.flex-{breakpoint}-wrap
.flex-{breakpoint}-nowrap
.flex-{breakpoint}-wrap-reverse

Flex item

<div class="d-flex flex-wrap bg-primary">
    <div class="p-2 bg-secondary text-white border">Flex item</div>
    ...
</div>

<div class="d-flex flex-nowrap bg-primary" style="width: 100px; height: 100px;">...</div>
<div class="d-flex flex-wrap-reverse bg-primary">...</div>

Align content

.align-content-start	align-content: start;
.align-content-end	align-content: end;
.align-content-center	align-content: center;
.align-content-between	align-content: space-between;
.align-content-around	align-content: space-around;
.align-content-stretch	align-content: stretch;

The classes can be responsive using breakpoints {sm|md|lg|xl}.

.align-content-{breakpoint}-start
.align-content-{breakpoint}-end
.align-content-{breakpoint}-center
.align-content-{breakpoint}-between
.align-content-{breakpoint}-around
.align-content-{breakpoint}-stretch

Flex item

<div class="d-flex flex-wrap align-content-start bg-primary mb-2" style="height: 200px;">
    <div class="p-2 bg-secondary text-white border">Flex item</div>
    ...
</div>

<div class="d-flex flex-wrap align-content-end bg-primary mb-2" style="height: 200px;">...</div>
<div class="d-flex flex-wrap align-content-center bg-primary mb-2" style="height: 200px;">...</div>
<div class="d-flex flex-wrap align-content-between bg-primary mb-2" style="height: 200px;">...</div>
<div class="d-flex flex-wrap align-content-around bg-primary mb-2" style="height: 200px;">...</div>
<div class="d-flex flex-wrap align-content-stretch bg-primary" style="height: 200px;">...</div>