Use flex elements to change a component's alignment, sizing, and layout. Note: You may need to implement custom CSS for more intricate applications.
How it works
Applying display utilities creates a flexbox container and makes its direct children elements into flex items. Both the containers and their items can be changed with other flex properties.
Example
I'm a flexbox container!
I'm an inline flexbox container!
<div>
<divclass="d-flex flex-item p-0_5">I'm a flexbox container!</div>
<divclass="d-inline-flex flex-item p-0_5 mt-1">I'm an inline flexbox container!</div>
</div>
There are responsive variations for .d-flex and .d-inline-flex.
.d-flex
.d-inline-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
Direction
Direction utilities enable you to set the direction of a flex item located in a flex container. Normally, you can leave the horizontal class here because the browser default is row. .flex-row sets a horizontal direction, and .flex-row-reverse starts the horizontal direction from the right.
Make flex items go vertically with .flex-column, or have them begin at the opposite side with .flex-column-reverse.
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
<divclass="d-flex flex-column">
<divclass="flex-item p-0_5">Flex item 1</div>
<divclass="flex-item p-0_5">Flex item 2</div>
<divclass="flex-item p-0_5">Flex item 3</div>
</div>
<divclass="d-flex flex-column-reverse mt-1">
<divclass="flex-item p-0_5">Flex item 1</div>
<divclass="flex-item p-0_5">Flex item 2</div>
<divclass="flex-item p-0_5">Flex item 3</div>
</div>
There are responsive variations for flex-direction.
.flex-row
.flex-row-reverse
.flex-column
.flex-column-reverse
.flex-sm-row
.flex-sm-row-reverse
.flex-sm-column
.flex-sm-column-reverse
.flex-md-row
.flex-md-row-reverse
.flex-md-column
.flex-md-column-reverse
.flex-lg-row
.flex-lg-row-reverse
.flex-lg-column
.flex-lg-column-reverse
.flex-xl-row
.flex-xl-row-reverse
.flex-lg-column
.flex-lg-column-reverse
Justify content
Switch the alignment of flex items located on the main axis by using justify-content. The main axis will be on the x-axis, or on the y-axis if you're using flex-direction: column. Pick between start, end, center, between, or around.
There are responsive variations for justify-content.
.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around
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.
You can line up flex items together on the cross axis by using align-content utilities on the flexbox containers. These include start (the browser default), end, center, between, around, and stretch. In the example below, we used flex-wrap: wrap and doubled the number of flex items.
There are also responsive variations for align-content.
.align-content-start
.align-content-end
.align-content-center
.align-content-around
.align-content-stretch
.align-content-sm-start
.align-content-sm-end
.align-content-sm-center
.align-content-sm-around
.align-content-sm-stretch
.align-content-md-start
.align-content-md-end
.align-content-md-center
.align-content-md-around
.align-content-md-stretch
.align-content-lg-start
.align-content-lg-end
.align-content-lg-center
.align-content-lg-around
.align-content-lg-stretch
.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-around
.align-content-xl-stretch
Align items
Move the alignment of flex items located on the cross axis (which is on the y-axis, but can be on the x-axis if you're using flex-direction: column) by using start, end, center, baseline, or stretch (this one is the browser default).
<divclass="d-flex align-items-end flex-item vert mt-1">
<divclass="flex-item p-0_5">Flex item</div>
<divclass="flex-item p-0_5">Flex item</div>
<divclass="flex-item p-0_5">Flex item</div>
</div>
<divclass="d-flex align-items-center flex-item vert mt-1">
<divclass="flex-item p-0_5">Flex item</div>
<divclass="flex-item p-0_5">Flex item</div>
<divclass="flex-item p-0_5">Flex item</div>
</div>
<divclass="d-flex align-items-baseline flex-item vert mt-1">
<divclass="flex-item p-0_5">Flex item</div>
<divclass="flex-item p-0_5">Flex item</div>
<divclass="flex-item p-0_5">Flex item</div>
</div>
<divclass="d-flex align-items-stretch flex-item vert mt-1">
<divclass="flex-item p-0_5">Flex item</div>
<divclass="flex-item p-0_5">Flex item</div>
<divclass="flex-item p-0_5">Flex item</div>
</div>
There are responsive variations for align-items.
.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch
.align-items-sm-start
.align-items-sm-end
.align-items-sm-center
.align-items-sm-baseline
.align-items-sm-stretch
.align-items-md-start
.align-items-md-end
.align-items-md-center
.align-items-md-baseline
.align-items-md-stretch
.align-items-lg-start
.align-items-lg-end
.align-items-lg-center
.align-items-lg-baseline
.align-items-lg-stretch
.align-items-xl-start
.align-items-xl-end
.align-items-xl-center
.align-items-xl-baseline
.align-items-xl-stretch
Align self
You can change a flexbox item's alignment on the cross axis (which will be the y-axis to start with, but can be on the x-axis if you use flex-direction: column ) by using align-self. You'll use the same settings as align-items: start, end, center, baseline, or stretch (which is the browser default).
There are responsive variations for span, align-self.
.align-self-start
.align-self-end
.align-self-center
.align-self-baseline
.align-self-stretch
.align-self-sm-start
.align-self-sm-end
.align-self-sm-center
.align-self-sm-baseline
.align-self-sm-stretch
.align-self-md-start
.align-self-md-end
.align-self-md-center
.align-self-md-baseline
.align-self-md-stretch
.align-self-lg-start
.align-self-lg-end
.align-self-lg-center
.align-self-lg-baseline
.align-self-lg-stretch
.align-self-xl-start
.align-self-xl-end
.align-self-xl-center
.align-self-xl-baseline
.align-self-xl-stretch
Auto margin
Combining flex alignments and auto margins enables you to expand your spacing abilities. Below are three examples of how you can control flex items with auto margins: with the default (which has no auto margin), by moving two items to the right (.mr-auto), and moving the same two items to the left (.ml-auto).
You can move a single flex box to a container's top or bottom when you combine align-items, flex-direction: column, and margin-top: auto or margin-bottom: auto.
You can also change how flex items wrap in a flex container, either by setting it up to have no wrapping (which is the browser default) by using .flex-nowrap, regular wrapping by using .flex-wrap, or having the wrapping reversed by using .flex-wrap-reverse.
There are also responsive variations for flex-wrap.
.flex-nowrap
.flex-wrap
.flex-wrap-reverse
.flex-sm-nowrap
.flex-sm-wrap
.flex-sm-wrap-reverse
.flex-md-nowrap
.flex-md-wrap
.flex-md-wrap-reverse
.flex-lg-nowrap
.flex-lg-wrap
.flex-lg-wrap-reverse
.flex-xl-nowrap
.flex-xl-wrap
.flex-xl-wrap-reverse
Order
order utilities enable you to shift around the visual order of select flex items. For now, we only have options for putting items first and last, as well as a reset to use the DOM order. `order` takes any integer value, so feel free to input custom CSS if you need any additional values.