.flex-fill class on a series of sibling elements to force them into widths equal to their content (or equal widths if their content does not surpass their border-boxes) while taking up all available horizontal space.
|flex: 1 1 auto;|
.flex-fill to allow a flex item to grow and shrink, taking into account its initial size:
<div class="d-flex"> <div class="col-2">01</div> <div class="flex-fill col-8">02</div> <div class="flex-fill col-4">03</div> </div>
flex-fill 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-fill to apply the
flex-fill utility at only medium screen sizes and above.
<div class="d-flex flex-md-fill"> <!-- ... --> </div>