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:
<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:
<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:
<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>