Flex Grow

Use .flex-grow-* utilities to toggle a flex item’s ability to grow to fill available space.

Quick reference

Basic usage

Grow

Use flex-grow to allow a flex item to grow to fill any available space:

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

Don’t grow

Use flex-grow-0 to prevent a flex item from growing:

<div class="d-flex">
  <div class="flex-grow-1">01</div>
  <div class="flex-grow-0">02</div>
  <div class="flex-grow-1">03</div>
</div>

Breakpoints

All flex grow 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}-grow-{1|0}.

• .flex-sm-grow-0
• .flex-sm-grow-1
• .flex-md-grow-0
• .flex-md-grow-1
• .flex-lg-grow-0
• .flex-lg-grow-1
• .flex-xl-grow-0
• .flex-xl-grow-1
• .flex-xxl-grow-0
• .flex-xxl-grow-1

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

<div class="flex-grow flex-md-grow-md-0">
  <!-- ... -->
</div>