Flex Wrap

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


1
2
3
4
5
6

Usage

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.

Wrap

Use the flex-wrap class to enable the wrapping of flex items:

1
2
3
4
5
6
<div class="d-flex flex-wrap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

No wrapping

Use flex-nowrap to avoid flex items from wrapping. You can use it next to scrollable-x to make it scrollable:

1
2
3
4
5
6
<div class="d-flex flex-nowrap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Reversed wrapping

Use the flex-wrap-reverse class to enable the wrapping of flex items in the reverse direction:

1
2
3
4
5
6
<div class="d-flex flex-wrap-reverse">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Responsive

Responsive variations also exist for each flex-wrap value. Use the .flex-wrap-{breakpoint}-{value} for sm, md, lg, xl, and xxl to any existing flex-wrap utility.

<div class="flax-wrap flex-md-nowrap ..."></div>
Bootstrap 5 Ready