Flex

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.

Flex on Bootstrap
Enable flex behaviors

Apply display utilities to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties.

Flexbox container!
Inline flexbox container!
<div class="d-flex p-2 bg-200 mb-2">Flexbox container!</div>
<div class="d-inline-flex p-2 bg-200">Inline flexbox container!</div>
Direction

Use .flex-row to set a horizontal direction (the browser default), or .flex-row-reverse to start the horizontal direction from the opposite side.

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
<div class="d-flex flex-row bg-200 mb-3">
  <div class="p-2 bg-300 border border-400">Flex item 1</div>
  <div class="p-2 bg-300 border border-400">Flex item 2</div>
  <div class="p-2 bg-300 border border-400">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bg-200">
  <div class="p-2 bg-300 border border-400">Flex item 1</div>
  <div class="p-2 bg-300 border border-400">Flex item 2</div>
  <div class="p-2 bg-300 border border-400">Flex item 3</div>
</div>

Use .flex-column to set a vertical direction, or .flex-column-reverse to start the vertical direction from the opposite side

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
<div class="d-flex flex-column bg-200 mb-3">
  <div class="p-2 bg-200 border border-400">Flex item 1</div>
  <div class="p-2 bg-200 border border-400">Flex item 2</div>
  <div class="p-2 bg-200 border border-400">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bg-200">
  <div class="p-2 bg-200 border border-400">Flex item 1</div>
  <div class="p-2 bg-200 border border-400">Flex item 2</div>
  <div class="p-2 bg-200 border border-400">Flex item 3</div>
</div>
Justify Content

Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column). Choose from start (browser default), end, center, between, or around.

Flex Item
Flex Item
Flex Item
Flex Item
Flex Item
<div class="d-flex justify-content-start bg-200 mb-2">
  <div class="p-2 bg-300 border border-400">Flex Item</div>
</div>
<div class="d-flex justify-content-end bg-200 mb-2">
  <div class="p-2 bg-300 border border-400">Flex Item</div>
</div>
<div class="d-flex justify-content-center bg-200 mb-2">
  <div class="p-2 bg-300 border border-400">Flex Item</div>
</div>
<div class="d-flex justify-content-between bg-200 mb-2">
  <div class="p-2 bg-300 border border-400">Flex Item</div>
</div>
<div class="d-flex justify-content-around bg-200 mb-2">
  <div class="p-2 bg-300 border border-400">Flex Item</div>
</div>
Align items

Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from start, end, center, baseline, or stretch (browser default).

Flex item
Flex item
Flex item
Flex item
Flex item 
<div class="d-flex align-items-start bg-200 mb-2" style="height: 5rem;">
  <div class="p-2 bg-300 border border-400">Flex item </div>
</div>
<div class="d-flex align-items-end bg-200 mb-2" style="height: 5rem;">
  <div class="p-2 bg-300 border border-400">Flex item </div>
</div>
<div class="d-flex align-items-center bg-200 mb-2" style="height: 5rem;">
  <div class="p-2 bg-300 border border-400">Flex item </div>
</div>
<div class="d-flex align-items-baseline bg-200 mb-2" style="height: 5rem;">
  <div class="p-2 bg-300 border border-400">Flex item </div>
</div>
<div class="d-flex align-items-stretch bg-200 mb-2" style="height: 5rem;">
  <div class="p-2 bg-300 border border-400">Flex item </div>
</div>
Align self

Use align-self utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from the same options as align-items: start, end, center, baseline, or stretch (browser default).

Flex Item
Align self start
Flex Item
Flex Item
Align self end
Flex Item
Flex Item
Align self center
Flex Item
Flex Item
Align self baseline
Flex Item
Flex Item
Align self stretch
Flex Item
<div class="d-flex bg-200 mb-2" style="height: 5rem;">
  <div class="border border-400 p-2 bg-300">Flex Item</div>
  <div class="border border-400 align-self-start p-2 bg-300">Align self start</div>
  <div class="border border-400 p-2 bg-300">Flex Item</div>
</div>
<div class="d-flex bg-200 mb-2" style="height: 5rem;">
  <div class="border border-400 p-2 bg-300">Flex Item</div>
  <div class="border border-400 align-self-end p-2 bg-300">Align self end</div>
  <div class="border border-400 p-2 bg-300">Flex Item</div>
</div>
<div class="d-flex bg-200 mb-2" style="height: 5rem;">
  <div class="border border-400 p-2 bg-300">Flex Item</div>
  <div class="border border-400 align-self-center p-2 bg-300">Align self center</div>
  <div class="border border-400 p-2 bg-300">Flex Item</div>
</div>
<div class="d-flex bg-200 mb-2" style="height: 5rem;">
  <div class="border border-400 p-2 bg-300">Flex Item</div>
  <div class="border border-400 align-self-baseline p-2 bg-300">Align self baseline</div>
  <div class="border border-400 p-2 bg-300">Flex Item</div>
</div>
<div class="d-flex bg-200 mb-2" style="height: 5rem;">
  <div class="border border-400 p-2 bg-300">Flex Item</div>
  <div class="border border-400 align-self-stretch p-2 bg-300">Align self stretch</div>
  <div class="border border-400 p-2 bg-300">Flex Item</div>
</div>
facebook