Flex Shrink

Quick reference

Basic usage

Use .flex-shrink-* utilities to toggle a flex item’s ability to shrink if necessary. For .flex-shrink-1 is forced to wrap its contents to a new line, “shrinking” to allow more space for the previous flex item with .w-100.

Shrink

Use flex-shrink-1 to allow a flex item to shrink if needed:

<div class="d-flex">
  <div>01</div>
  <div class="flex-shrink-1" style="width:256px">02</div>
  <div>03</div>
</div>

Don’t shrink

Use flex-shrink-0 to prevent a flex item from shrinking:

<div class="d-flex ...">
  <div class="flex-fill">01</div>
  <div class="flex-shrink-0" style="width: 256px;">02</div>
  <div class="flex-fill">03</div>
</div>

Responsive breakpoints

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

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

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

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