Flex

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


Class
Properties
flex-1
flex-fill
flex-initial
flex-none

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.

Flex item
Flex item
Flex item with a lot of content
<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:

Flex item
Flex item
Flex item with a lot of content
<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:

Flex item
Flex item
Flex item with a lot of content
<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:

Flex item that will change its size
I will stay like this
Flex item that will change its size
<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>
UI Components

Start building incredible websites and apps with the pre-made components and pages.

Explore ->