Use these classes to define the orientation of the main axis (row or column). By default, flex items will display in a row. Use .flex-column to change the direction of the main axis to vertical.
This example uses the responsive variant .flex-sm-column-reverse to override .flex-column Learn more about responsive flexbox utilities here. Keep in mind that it won't affect screen readers or navigating with the keyboard and it's advised to keep the markup in a logical source order.
This example uses the responsive variant .flex-sm-row-reverse to override .flex-column Learn more about responsive flexbox utilities here. Keep in mind that it won't affect screen readers or navigating with the keyboard and it's advised to keep the markup in a logical source order.
Distribute items evenly. First item is on the start line, last item is on the end line.
.flex-justify-around
Distribute items evenly with equal space around them
flex-justify-start
Use .flex-justify-start to align items to the start line. By default this will be on the left side of the container. If you are using .flex-column, the start line will be at the top of the container.
<divclass="border d-flex flex-justify-start">
<divclass="p-5 border color-bg-subtle">1</div>
<divclass="p-5 border color-bg-subtle">2</div>
<divclass="p-5 border color-bg-subtle">3</div>
</div>
flex-justify-end
Use .flex-justify-end to align items to the end line. By default this will be on the right side of the container. If you are using .flex-column, the end line will be at the bottom of the container.
<divclass="border d-flex flex-justify-end">
<divclass="p-5 border color-bg-subtle">1</div>
<divclass="p-5 border color-bg-subtle">2</div>
<divclass="p-5 border color-bg-subtle">3</div>
</div>
flex-justify-center
Use .flex-justify-center to align items in the middle of the container.
<divclass="border d-flex flex-justify-center">
<divclass="p-5 border color-bg-subtle">1</div>
<divclass="p-5 border color-bg-subtle">2</div>
<divclass="p-5 border color-bg-subtle">3</div>
</div>
flex-justify-between
Use .flex-justify-between to distribute items evenly in the container. The first items will be on the start line and the last item will be on the end line.
<divclass="border d-flex flex-justify-between">
<divclass="p-5 border color-bg-subtle">1</div>
<divclass="p-5 border color-bg-subtle">2</div>
<divclass="p-5 border color-bg-subtle">3</div>
</div>
flex-justify-around
Use .flex-justify-around to distribute items evenly, with an equal amount of space around them. Visually the spaces won't look equal, since each item has the same unit of space around it. For example, the first item only has one unit of space between it and the start line, but it has two units of space between it and the next item.
<divclass="border d-flex flex-justify-around">
<divclass="p-5 border color-bg-subtle">1</div>
<divclass="p-5 border color-bg-subtle">2</div>
<divclass="p-5 border color-bg-subtle">3</div>
</div>
Align items
Use these classes to align items on the cross axis.
The cross axis runs perpendicular to the main axis. By default the main axis runs horizontally, so your items will align vertically on the cross axis. If you use flex-column to make the main axis run vertically, your items will be aligned horizontally.
CSS
.flex-items-start{align-items: flex-start;}
.flex-items-end{align-items: flex-end;}
.flex-items-center{align-items: center;}
.flex-items-baseline{align-items: baseline;}
.flex-items-stretch{align-items: stretch;}
Classes
Class
Behavior
.flex-items-start
Align items to the start of the cross axis
.flex-items-end
Align items to the end of the cross axis
.flex-items-center
Align items to the center of the cross axis
.flex-items-baseline
Align items along their baselines
.flex-items-stretch
Stretch items from start of cross axis to end of cross axis
When the main axis wraps, this creates multiple main axis lines and adds extra space in the cross axis. Use these classes to align the lines of the main axis on the cross axis.
Add .flex-grow-0 to prevent an item from growing. This can be useful when used as a responsive variant. For example to stop growing when the viewport gets wider.
Add .flex-shrink-0 to prevent an item from shrinking. Note that for example text will not wrap and the flex items start to overflow if there is not enough space.
Use these classes to adjust the alignment of an individual flex item on the cross axis. This overrides any align-items property applied to the flex container.
CSS
.flex-self-auto{align-self: auto;}
.flex-self-start{align-self: flex-start;}
.flex-self-end{align-self: flex-end;}
.flex-self-center{align-self: center;}
.flex-self-baseline{align-self: baseline;}
.flex-self-stretch{align-self: stretch;}
Classes
Class
Description
.flex-self-auto
Inherit alignment from parent
.flex-self-start
Align to the start of the cross axis
.flex-self-end
Align to the end of the cross axis
.flex-self-center
Align to center of cross axis
.flex-self-baseline
Align baseline to the start of the cross axis
.flex-self-stretch
Stretch item from start of cross axis to end of cross axis.
Use these classes to change the order of flex items. Keep in mind that it won't affect screen readers or navigating with the keyboard and it's advised to keep the markup in a logical source order.
CSS
.flex-order-1{order: 1;}
.flex-order-2{order: 2;}
.flex-order-none{order: inherit;}
Classes
Class
Description
.flex-order-1
Set order to be 1
.flex-order-2
Set order to be 2
.flex-order-none
Remove order (typically used with responsive variants)
Minimum content sizing of flex items not honored. Some browsers don't respect flex item size. Instead of respecting the minimum content size, items shrink below their minimum size which can create some undesirable results, such as overflowing text. The workaround is to apply flex-shrink: 0; to the items using d-flex. This can be applied with the flex-shrink-0 utility. For more information read philipwalton/flexbugs.
Some elements can't be flex containers. Specifically, <button>, <fieldset>, and <summary> elements cannot be styled with display: flex in Safari. Instead of using class="d-flex" on these elements, you should nest an element within them, e.g. <summary><div class="d-flex">...</div></summary>.
