Flex

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.

Apply display utilities to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties.

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

<div class="d-inline-flex p-2 border border-primary">I'm an inline flexbox container!</div>

Responsive variations also exist, with .d-{breakpoint}-flex and .d-{breakpoint}-inline-flex, where breakpoint can be sm, md, lg or xl.

• .d-flex
• .d-flex
• .d-sm-flex
• .d-sm-inline-flex
• .d-md-flex
• .d-md-inline-flex
• .d-lg-flex
• .d-lg-inline-flex
• .d-xl-flex
• .d-xl-inline-flex

Usage

Direction

Set the direction of flex items in a flex container with .flex-row, .flex-row-reverse for horizontal directions, and .flex-column, .flex-column-reverse for vertical directions. The default is row.

<div class="d-flex flex-row mb-3">
  <div class="p-2 border border-primary">Flex item 1</div>
  <div class="p-2 border border-primary">Flex item 2</div>
  <div class="p-2 border border-primary">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2 border border-primary">Flex item 1</div>
  <div class="p-2 border border-primary">Flex item 2</div>
  <div class="p-2 border border-primary">Flex item 3</div>
</div>

<div class="d-flex flex-column mb-3">
  <div class="p-2 border border-primary">Flex item 1</div>
  <div class="p-2 border border-primary">Flex item 2</div>
  <div class="p-2 border border-primary">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2 border border-primary">Flex item 1</div>
  <div class="p-2 border border-primary">Flex item 2</div>
  <div class="p-2 border border-primary">Flex item 3</div>
</div>

Responsive variations exist here, using the following syntax, where breakpoint can be sm, md, lg or xl:

• .flex-{breakpoint}-row
• .flex-{breakpoint}-row-reverse
• .flex-{breakpoint}-column
• .flex-{breakpoint}-column-reverse

Justify content

Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis on row, y-axis on flex-direction: column). Choose from start (browser default), end, center, between, or around.

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

Responsive variations exist for justify-content, using the following syntax: .justify-content-{breakpoint}-{alignment}, where breakpoint can be sm, md, lg or xl. Such as .justify-content-lg-center and .justify-content-sm-end.

Align items

Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis on row, x-axis on flex-direction: column). Choose from start (browser default), end, center, baseline, or stretch.

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

Responsive variations exist for align-items, using the following syntax: .align-items-{breakpoint}-{alignment}, where breakpoint can be sm, md, lg or xl. Such as .align-items-lg-center and .align-items-sm-end.

Align self

Use align-self utilities on flexbox items to individually change their alignment on the cross axis (the y-axis on row, x-axis on flex-direction: column). Choose from start (browser default), end, center, baseline, or stretch.

<div class="d-flex justify-content-start">Self-aligned flex item</div>
<div class="d-flex justify-content-end">Self-aligned flex item</div>
<div class="d-flex justify-content-center">Self-aligned flex item</div>
<div class="d-flex justify-content-between">Self-aligned flex item</div>
<div class="d-flex justify-content-around">Self-aligned flex item</div>

Responsive variations exist for align-self, using the following syntax: .align-self-{breakpoint}-{alignment}, where breakpoint can be sm, md, lg or xl. Such as .align-self-lg-center and .align-self-sm-end.

Fill

Use the .flex-fill class on a series of sibling elements to force them into widths equal to their content (or equal widths if their content does not surpass their border-boxes) while taking up all available horizontal space.

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

Responsive variations exist, using .flex-{breakpoint}-fill, where breakpoint can be sm, md, lg or xl. Such as .flex-sm-fill and .flex-lg-fill.

Grow and shrink

Use .flex-grow-{toggle} utilities, where toggle is either 0 (off) or 1 (on), to toggle a flex item’s ability to grow to fill available space. In the example below, the .flex-grow-1 elements uses all available space it can, while allowing the remaining two flex items their necessary space.

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

Similarily, use .flex-shrink-{toggle}, where toggle is either 0 (off) or 1 (on), to toggle a flex item’s ability to shrink if necessary. In the example below, the second flex item with .flex-shrink-1 is forced to wrap it’s contents to a new line, “shrinking” to allow more space for the previous flex item with .w-100.

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

Responsive variations exist for flex-grow and flex-shrink, using the following syntax: .flex-{breakpoint}-grow-{toggle}, where breakpoint can be sm, md, lg or xl. Such as .flex-md-grow-1 and .flex-sm-shrink-0.

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 (.mr-auto), and pushing two items to the left (.ml-auto).

<div class="d-flex border border-primary mb-3">
  <div class="p-2 border border-primary">Flex item</div>
  <div class="p-2 border border-primary">Flex item</div>
  <div class="p-2 border border-primary">Flex item</div>
</div>

<div class="d-flex border border-primary mb-3">
  <div class="mr-auto p-2 border border-primary">Flex item</div>
  <div class="p-2 border border-primary">Flex item</div>
  <div class="p-2 border border-primary">Flex item</div>
</div>

<div class="d-flex border border-primary mb-3">
  <div class="p-2 border border-primary">Flex item</div>
  <div class="p-2 border border-primary">Flex item</div>
  <div class="ml-auto p-2 border border-primary">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 align-items-start flex-column border border-primary mb-3" style="height: 200px;">
  <div class="mb-auto p-2 border border-primary">Flex item</div>
  <div class="p-2 border border-primary">Flex item</div>
  <div class="p-2 border border-primary">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column border border-primary mb-3" style="height: 200px;">
  <div class="p-2 border border-primary">Flex item</div>
  <div class="p-2 border border-primary">Flex item</div>
  <div class="mt-auto p-2 border border-primary">Flex item</div>
</div>

Wrap

Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with .flex-nowrap, wrapping with .flex-wrap, or reverse wrapping with .flex-wrap-reverse.

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

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

<div class="d-flex flex-wrap-reverse">
  ...
</div>

Responsive variations exist for flex-wrap, using the following syntax: .flex-{breakpoint}-{wrap}, where breakpoint can be sm, md, lg or xl. Such as .flex-sm-nowrap and .flex-xl-wrap-reverse.

Order

Change the visual order of specific flex items with a handful of order utilities, using .order-{value}, where value may range from 0 to 12.

<div class="d-flex flex-nowrap border border-primary">
  <div class="order-3 p-2 border border-primary">First flex item</div>
  <div class="order-2 p-2 border border-primary">Second flex item</div>
  <div class="order-1 p-2 border border-primary">Third flex item</div>
</div>

Responsive variations exist for order, using the following syntax: .order-{breakpoint}-{value}, where breakpoint can be sm, md, lg or xl. Such as .order-lg-5 and .order-sm-1.

Align content

Align flex items together in flexbox containers on the cross axis with align-content, using .align-content-{alignment}, where alignment can be start, end, center, between, around or stretch. To demonstrate this, .flex-wrap is added.

<div class="d-flex flex-wrap align-content-center">
  ...
</div>

<div class="d-flex flex-wrap align-content-between">
  ...
</div>

Responsive variations exist for align-content, using the following syntax: .align-content-{breakpoint}-{alignment}, where breakpoint can be sm, md, lg or xl. Such as .align-content-md-around and .align-content-xl-end.