Flex

To enabled flex use any of the display flex classes from here.

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. For columns, Use .flex-column to set a vertical direction, or .flex-column-reverse to start the vertical direction from the opposite side.

Here are all the supported classes:

  • .flex-row or .flex-{sm,md,lg,xl}-row
  • .flex-row-reverse or .flex-{sm,md,lg,xl}-row-reverse
  • .flex-column or .flex-{sm,md,lg,xl}-column
  • .flex-column-reverse or .flex-{sm,md,lg,xl}-column-reverse

.flex-row on parent

item 1
item 2
item 3


.flex-row-reverse on parent

item 1
item 2
item 3


.flex-column on parent

item 1
item 2
item 3


.flex-column-reverse on parent

item 1
item 2
item 3

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.

  • .justify-content-start or .justify-content-{sm,md,lg,xl}-start
  • .justify-content-end or .justify-content-{sm,md,lg,xl}-end
  • .justify-content-center or .justify-content-{sm,md,lg,xl}-center
  • .justify-content-between or .justify-content-{sm,md,lg,xl}-between
  • .justify-content-around or .justify-content-{sm,md,lg,xl}-around

.justify-content-start on parent

item 1
item 2
item 3


.justify-content-end on parent

item 1
item 2
item 3


.justify-content-center on parent

item 1
item 2
item 3


.justify-content-between on parent

item 1
item 2
item 3


.justify-content-around on parent

item 1
item 2
item 3

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).

  • .align-items-start or .align-items-{sm,md,lg,xl}-start
  • .align-items-end or .align-items-{sm,md,lg,xl}-end
  • .align-items-center or .align-items-{sm,md,lg,xl}-center
  • .align-items-baseline or .align-items-{sm,md,lg,xl}-baseline
  • .align-items-stretch or .align-items-{sm,md,lg,xl}-stretch


.align-items-start on parent

item 1
item 2
item 3


.align-items-end on parent

item 1
item 2
item 3


.align-items-center on parent

item 1
item 2
item 3


.align-items-baseline on parent

item 1
item 2
item 3


.align-items-stretch on parent

item 1
item 2
item 3
				
<!-- Direction -->
<div class="d-flex flex-row">
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
</div>

<div class="d-flex flex-row-reverse"> ... </div>
<div class="d-flex flex-column"> ... </div>
<div class="d-flex flex-column-reverse"> ... </div>

<!-- Justify content -->
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

<!-- Align items -->
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>