Flex

Enable flex behavior

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

Class name	CSS property
.d-flex	display: flex;
.d-inline-flex	display: inline-flex;

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

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

<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.

Class name	CSS property
.flex-row	flex-direction: row;
.flex-row-reverse	flex-direction: row-reverse;

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

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

<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.

Class name	CSS property
.flex-column	flex-direction: column;
.flex-column-reverse	flex-direction: column-reverse;

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

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

<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

Class name	CSS property
.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;
.justify-content-evenly	justify-content: space-evenly;

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

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

<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>
<div class="d-flex justify-content-evenly bg-primary">...</div>

Align items

Class name	CSS property
.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|xxl}.

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

<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

Class name	CSS property
.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;

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

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

<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

Class name	CSS property
.flex-fill	flex: 1 1 auto;

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

• .flex-{breakpoint}-fill

<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

Class name	CSS property
.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|xxl}.

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

<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>

Auto margins

Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (.me-auto), and pushing two items to the left (.ms-auto).

<div class="d-flex bg-primary">
    <div class="p-2 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">Flex item</div>
</div>

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

<div class="d-flex bg-primary">
    <div class="p-2 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 ms-auto">Flex item</div>
</div>

With align-items

Vertically move one flex item to the top or bottom of a container by mixing align-items, flex-direction: column, and margin-top: auto or margin-bottom: auto.

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

<div class="d-flex bg-primary align-items-end flex-column" style="height: 200px;">
    <div class="p-2 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 mt-auto">Flex item</div>
</div>

Wrap

Class name	CSS property
.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|xxl}.

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

<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">...</div>
<div class="d-flex flex-wrap-reverse bg-primary">...</div>

Align content

Class name	CSS property
.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|xxl}.

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

<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>