Flex

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

Enable flex behaviors

Apply display: flex to create a flexbox container and transform direct children into flex items.

Flex item 1

Flex item 2

Flex item 3

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

Responsive variants: d-sm-flex, d-md-flex, d-lg-flex, etc. Or d-inline-flex for inline behavior.

Direction

row 1

row 2

col 1

col 2

<div class="d-flex flex-row bg-light border rounded p-2 mb-2"><div class="p-2 border rounded bg-white me-2"><span>row 1</span></div><div class="p-2 border rounded bg-white"><span>row 2</span></div></div>
<div class="d-flex flex-column bg-light border rounded p-2 demo-box-w14"><div class="p-2 border rounded bg-white mb-2"><span>col 1</span></div><div class="p-2 border rounded bg-white"><span>col 2</span></div></div>

Justify content

start

center

end

between

around

<div class="d-flex justify-content-start bg-light border rounded p-2 mb-2"><div class="p-2 border rounded bg-white"><span>start</span></div></div>
<div class="d-flex justify-content-center bg-light border rounded p-2 mb-2"><div class="p-2 border rounded bg-white"><span>center</span></div></div>
<div class="d-flex justify-content-end bg-light border rounded p-2 mb-2"><div class="p-2 border rounded bg-white"><span>end</span></div></div>
<div class="d-flex justify-content-between bg-light border rounded p-2 mb-2"><div class="p-2 border rounded bg-white"><span>between</span></div><div class="p-2 border rounded bg-white"><span>between</span></div></div>
<div class="d-flex justify-content-around bg-light border rounded p-2"><div class="p-2 border rounded bg-white"><span>around</span></div><div class="p-2 border rounded bg-white"><span>around</span></div></div>

Align items

start

center

end

<div class="d-flex align-items-start bg-light border rounded p-2 mb-2 demo-min-h70"><div class="p-2 border rounded bg-white"><span>start</span></div></div>
<div class="d-flex align-items-center bg-light border rounded p-2 mb-2 demo-min-h70"><div class="p-2 border rounded bg-white"><span>center</span></div></div>
<div class="d-flex align-items-end bg-light border rounded p-2 demo-min-h70"><div class="p-2 border rounded bg-white"><span>end</span></div></div>

Fill & grow

flex-fill

flex-grow-1

auto

<div class="d-flex bg-light border rounded p-2">
  <div class="flex-fill p-2 border rounded bg-white me-2"><span>flex-fill</span></div>
  <div class="flex-fill p-2 border rounded bg-white me-2"><span>flex-fill</span></div>
  <div class="flex-fill p-2 border rounded bg-white"><span>flex-fill</span></div>
</div>
<div class="d-flex bg-light border rounded p-2 mt-2">
  <div class="flex-grow-1 p-2 border rounded bg-white me-2"><span>flex-grow-1</span></div>
  <div class="p-2 border rounded bg-white"><span>auto</span></div>
</div>

Order

Change the visual order with .order-{0..5}, .order-first, .order-last, responsive as needed.

Ordered last

Ordered first

<div class="d-flex bg-light border rounded p-2">
  <div class="order-last p-2 border rounded bg-white me-2"><span>Ordered last</span></div>
  <div class="order-first p-2 border rounded bg-white"><span>Ordered first</span></div>
</div>

Align self

start

center

end

<div class="d-flex bg-light border rounded p-2 demo-min-h100">
  <div class="align-self-start p-2 border rounded bg-white me-2"><span>start</span></div>
  <div class="align-self-center p-2 border rounded bg-white me-2"><span>center</span></div>
  <div class="align-self-end p-2 border rounded bg-white"><span>end</span></div>
</div>

Gap

Use .gap-{0..5} (and responsive) for consistent spacing between flex or grid children:

gap-3

<div class="d-flex gap-3 bg-light border rounded p-2">
  <div class="p-2 border rounded bg-white"><span>gap-3</span></div>
  <div class="p-2 border rounded bg-white"><span>gap-3</span></div>
  <div class="p-2 border rounded bg-white"><span>gap-3</span></div>
</div>