Flex

Use the .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.

Quick reference

Basic usage

Auto

Use .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>

Breakpoints

The flex-fill 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}-fill.

• .flex-sm-fill
• .flex-md-fill
• .flex-lg-fill
• .flex-xl-fill
• .flex-xxl-fill

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>