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

Fill

Use flex-fill to allow a flex item to grow and shrink if needs:

<div class="d-flex ...">
  <div>
    01
  </div>
  <div class="flex-auto bd-w-64 ...">
    02
  </div>
  <div class="flex-auto bd-w-32 ...">
    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>