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

Flex 1

Use flex-1 to allow a flex item to grow and shrink as needed, ignoring its initial size:

<div class="d-flex">
  <div class="flex-none ...">01</div>
  <div class="flex-1 col-8 ...">02</div>
  <div class="flex-1 col-4 ...">03</div>
</div>

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="flex-none ...">01</div>
  <div class="flex-fill col-8 ...">02</div>
  <div class="flex-fill col-4 ...">03</div>
</div>

None

Use flex-none to prevent a flex item from growing or shrinking:

<div class="d-flex">
  <div class="flex-none ...">01</div>
  <div class="flex-none ...">02</div>
  <div class="flex-1 ...">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>