.flex-grow-* utilities to toggle a flex item’s ability to grow to fill available space.
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>
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>
All flex grow utilities that supports responsive at specific breakpoints, from
xxl, have no breakpoint abbreviation in them.
The responsive classes are named using the format
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>