Flex

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.

¶Flex fill

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.

<div class="d-flex">
    <div class="flex-fill"></div>
    <div class="flex-fill"></div>
    <div class="flex-fill"></div>
</div>

¶Flex 1

Use the .flex-1 class on any flex item to make them grow or shrink as needed:

<div class="d-flex">
    <div class="flex-1"></div>
    <div class="flex-1"></div>
    <div class="flex-1"></div>
</div>

¶Flex initial

Use the .flex-initial class to allow a flex item to shrink as needed. This won't allow the flex item to grow:

<div class="d-flex">
    <div class="flex-initial"></div>
    <div class="flex-initial"></div>
    <div class="flex-initial"></div>
</div>

¶Flex none

Use the .flex-none class on any flex item to prevent a it from growing or shrinking:

<div class="d-flex">
    <div class="flex-fill"></div>
    <div class="flex-none"></div>
    <div class="flex-fill"></div>
</div>

¶Responsive

Responsive variations also exist for each flex value. Use the .flex-{breakpoint}-{value} for sm, md, lg, xl, and xxl to any existing flex utility.

<div class="flex-none flex-md-fill ..."></div>