PRIMARY PAGE HEADER

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

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>

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
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
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
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
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
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
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
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
Flex item
Third flex item
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
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
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 class="p-2 bg-secondary text-white border">Flex item</div>
    ...
</div>

<div class="d-flex flex-wrap-reverse bg-primary">
    <div class="p-2 bg-secondary text-white border">Flex item</div>
    ...
</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
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item