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>
