Flex Wrap

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.

Quick reference

Basic usage

Don’t wrap

Use flex-nowrap to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary:

<div class="d-flex flex-nowrap">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Wrap normal

Use flex-wrap to allow flex items to wrap:

<div class="d-flex flex-wrap">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Wrap reversed

Use flex-wrap-reverse to wrap flex items in the reverse direction:

<div class="d-flex flex-wrap-reverse">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Breakpoints

All flex direction utilities that supports responsive at specific breakpoints, from xs to xxl, have no breakpoint abbreviation in them.

The responsive classes are named using the format flex-{breakpoint}-{wrap|nowrap|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
• .flex-xxl-nowrap
• .flex-xxl-wrap
• .flex-xxl-wrap-reverse

For example, use flex-md-wrap-reverse to apply the flex-wrap-reverse utility at only medium screen sizes and above.

<div class="d-flex flex-wrap flex-md-wrap-reverse">
  <!-- ... -->
</div>