Flex Wrap

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


Class
Properties
flex-wrap
flex-nowrap
flex-wrap-reverse

Wrap

Use the .flex-grow-1 class on any flex element to fill all the available space, while allowing the remaining two flex items their necessary space.

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

No wrap

Use the .flex-grow-1 class on any flex element to fill all the available space, while allowing the remaining two flex items their necessary space.

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

Wrap reversed

1
2
3
<div class="d-flex flex-wrap">
  <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>