Bootstrap - Flex Utility Classes Part 5: Flex Grow, Shrink, Wrap, and Order

Advanced Flex Utilities

These utilities help control item growth, wrapping behaviour, and display order.

Example 10: Wrapping Items

<div class="d-flex flex-wrap">

  <div class="p-2 bg-info">Box 1</div>

  <div class="p-2 bg-warning">Box 2</div>

  <div class="p-2 bg-success">Box 3</div>

  <div class="p-2 bg-danger">Box 4</div>

</div>

Explanation:

flex-wrap allows items to wrap to the next line if space is insufficient.

Example 11: Flex Grow

<div class="d-flex">

  <div class="flex-grow-1 bg-primary text-white p-2">Grow</div>

  <div class="bg-secondary text-white p-2">No Grow</div>

</div>

Explanation:

The first item grows to take up the remaining space, while the second keeps its default size.

Example 12: Ordering Items

<div class="d-flex">

  <div class="order-3 p-2 bg-danger">Third</div>

  <div class="order-1 p-2 bg-warning">First</div>

  <div class="order-2 p-2 bg-info">Second</div>

</div>

Explanation:

order-* changes the visual order of the items without changing the HTML structure.