Enable flex behaviors
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. The .d-flex class makes the flex container a block-level element. The .d-inline-flex class makes the flex container an atomic inline-level element. Please note: an anonymous flex item that contains only white space is not rendered, as if it were designated display: none. Also clear and vertical-align properties have no effect on flex items, and float causes the display property of the element to compute to block.

Flexbox container

I'm a flexbox container!

Inline flexbox container

I'm an inline flexbox container!
Display classes
.d-flex Displays an element as a block-level flex container
.d-[breakpoint]-flex Responsive variations of .d-flex class. Options for [breakpoint]: sm, md, lg, xl screen sizes
.d-inline-flex Displays an element as an inline-level flex container
.d-[breakpoint]-inline-flex Responsive variations of .d-inline-flex class. Options for [breakpoint]: sm, md, lg, xl screen sizes
Flex direction

Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is row. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts). Use .flex-row to set a horizontal direction (the browser default), or .flex-row-reverse to start the horizontal direction from the opposite side. Use .flex-column to set a vertical direction, or .flex-column-reverse to start the vertical direction from the opposite side.

Row direction

Flex item 1
Flex item 2
Flex item 3
Flex item 4

Reverse row direction

Flex item 1
Flex item 2
Flex item 3
Flex item 4

Column direction

Flex item 1
Flex item 2
Flex item 3
Flex item 4

Reverse column direction

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex row classes
.flex-row Default value. The flexible items are displayed horizontally, as a row
.flex-[breakpoint]-row Responsive variations of .flex-row class. Options for [breakpoint]: sm, md, lg, xl screen sizes
.flex-row-reverse Same as row, but in reverse order
.flex-[breakpoint]-row-reverse Responsive variations of .flex-row-reverse class. Options for [breakpoint]: sm, md, lg, xl screen sizes
Flex column classes
.flex-column The flexible items are displayed vertically, as a column
.flex-[breakpoint]-column Responsive variations of .flex-column class. Options for [breakpoint]: sm, md, lg, xl screen sizes
.flex-column-reverse Same as column, but in reverse order
.flex-[breakpoint]-column-reverse Responsive variations of .flex-column-reverse class. Options for [breakpoint]: sm, md, lg, xl screen sizes
Justify content
Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column). Choose from start (browser default), end, center, between, or around values. The alignment is done after the lengths and auto margins are applied, meaning that, if in a Flexbox layout there is at least one flexible element, with flex-grow different from 0, it will have no effect as there won't be any available space.

Beginning (start) of the container

Flex item
Flex item
Flex item

Center of the container

Flex item
Flex item
Flex item

End of the container

Flex item
Flex item
Flex item

With space between the lines

Flex item
Flex item
Flex item

With space before, between, and after the lines

Flex item
Flex item
Flex item
Justify content classes
.justify-content-[value] Aligns the flex container's items when the items don't use all available space on the main-axis (horizontally). Available options for [value]: start (browser default), end, center, between, or around.
.justify-content-[breakpoint]-[value] Responsive variations of .justify-content-[value] classes. Options for [breakpoint]: sm, md, lg, xl screen sizes
Align items
Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from start, end, center, baseline, or stretch (browser default). Basically it works like justify-content, but in the perpendicular direction. Tip: use the align-self property of each item to override the align-items property.

Beginning (start) of the container

Flex item
Flex item
Flex item

Center of the container

Flex item
Flex item
Flex item

End of the container

Flex item
Flex item
Flex item

WBaseline of the container

Flex item
Flex item
Flex item

Fit the container

Flex item
Flex item
Flex item
Align items classes
.align-items-[value] Alignment of items inside flex container. Options for [value]: start, end, center, baseline, or stretch (browser default).
.align-items-[breakpoint]-[value] Responsive variations of .align-items-[value] classes. Options for [breakpoint]: sm, md, lg, xl screen sizes
Align self
Use align-self utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from the same options as align-items: start, end, center, baseline, or stretch (browser default). The property doesn't apply to block-level boxes, or to table cells.

Beginning (start) of the container

Flex item
Aligned flex item
Flex item

Center of the container

Flex item
Aligned flex item
Flex item

End of the container

Flex item
Aligned flex item
Flex item

Baseline of the container

Flex item
Aligned flex item
Flex item

Fit the container

Flex item
Aligned flex item
Flex item
Align self classes
.align-self-[value] Alignment of the selected item inside flex container. Options for [value]: start, end, center, baseline, or stretch (browser default).
.align-self-[breakpoint]-[value] Responsive variations of .align-self-[value] classes. Options for [breakpoint]: sm, md, lg, xl screen sizes.
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). Unfortunately, IE10 and IE11 do not properly support auto margins on flex items whose parent has a non-default justify-content value.

Right auto margin

Flex item 1
Flex item 2
Flex item 3

Left auto margin

Flex item 1
Flex item 2
Flex item 3

Bottom auto margin

Flex item 1
Flex item 2
Flex item 3

Top auto margin

Flex item 1
Flex item 2
Flex item 3
Auto margin classes
.m[t,b,l,r]-auto Pushes flex items to specified side, where "l" is left, "r" is right, "t" is top and "b" is bottom.
.m[t,b,l,r]-[breakpoint]-auto Responsive variations of .m[t,b,l,r]-auto classes. Options for [breakpoint]: sm, md, lg, xl screen sizes
Flex wrap
The flex-wrap classes specify whether flex items are forced into a single line or can be wrapped onto multiple lines. If wrapping is allowed, this property also enables you to control the direction in which lines are stacked. Note: if the elements are not flexible items, the flex-wrap property has no effect. Supports 2 directions: default and reversed.

No wrap

Flex item
Flex item
Flex item
Flex item

Wrap - default direction

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

Wrap - reversed direction

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex wrap classes
.flex-nowrap The flex items are laid out in a single line - may cause the flex container to overflow
.flex-[breakpoint]-nowrap Responsive variations of .flex-nowrap class. Options for [breakpoint]: sm, md, lg, xl screen sizes
.flex-wrap The flex items break into multiple lines
.flex-[breakpoint]-wrap Responsive variations of .flex-wrap class. Options for [breakpoint]: sm, md, lg, xl screen sizes
.flex-wrap-reverse Behaves the same as .flex-wrap, but in reverse order
.flex-[breakpoint]-wrap-reverse Responsive variations of .flex-wrap-reverse class. Options for [breakpoint]: sm, md, lg, xl screen sizes
Flex order
Change the visual order of specific flex items with a handful of order utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As order takes any integer value (e.g., 5), add custom CSS for any additional values needed. Elements with the same order value are laid out in the order in which they appear in the source code. Note: If the element is not a flexible item, the order property has no effect.

Default order

Flex item 1
Flex item 2
Flex item 3

Custom order

Flex item 1
Flex item 2
Flex item 3

Default order

Flex item 1
Flex item 2
Flex item 3

Custom order

Flex item 1
Flex item 2
Flex item 3
Flex order classes
.order-[value] Specify the order used to lay out flex items in their flex container. Values for [value]: 1, 2, ... 12.
.order-[breakpoint]-[value] Responsive variations of .order-[value] classes. Options for [breakpoint]: sm, md, lg, xl screen sizes
Align content
Use align-content utilities on flexbox containers to align flex items together on the cross axis. Choose from start (browser default), end, center, between, around, or stretch. To demonstrate these utilities, we’ve enforced flex-wrap: wrap and increased the number of flex items. Note: this property has no effect on single rows of flex items.

Start of the flex container

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

End of the flex container

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

Center of the flex container

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

Evenly in the flex container

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

Evenly with half-size spaces on either end

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

Stretch to take up the remaining space

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Align content classes
.align-content-[value] Similar to align-items, but instead of aligning flex items, it aligns flex lines. Options for [value] are similar to .justify-content-[value] classes
.align-content-[breakpoint]-[value] Responsive variations of .align-content-[value] classes. Options for [breakpoint]: sm, md, lg, xl screen sizes