.flex-shrink-* utilities can be usedto toggle a flex item’s ability to shrink if necessary. In the example below, the second flex item with .flex-shrink-1 is forced to wrap contents to a new line, so “shrinking” to allow more space for the previous flex item with .w-100.

Detailed documentation and more examples you can find in our Bootstrap Flexbox Docs


Example


      <div class="w-100">Flex item</div>
      <div class="flex-shrink-1">Flex item</div>
    
Flex item
Flex item