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-{xs,sm,md,lg,xl,xxl}-row
  • .flex-row-reverse or .flex-{xs,sm,md,lg,xl,xxl}-row-reverse
  • .flex-column or .flex-{xs,sm,md,lg,xl,xxl}-column
  • .flex-column-reverse or .flex-{xs,sm,md,lg,xl,xxl}-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-{xs,sm,md,lg,xl,xxl}-start
  • .justify-content-end or .justify-content-{xs,sm,md,lg,xl,xxl}-end
  • .justify-content-center or .justify-content-{xs,sm,md,lg,xl,xxl}-center
  • .justify-content-between or .justify-content-{xs,sm,md,lg,xl,xxl}-between
  • .justify-content-around or .justify-content-{xs,sm,md,lg,xl,xxl}-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-{xs,sm,md,lg,xl,xxl}-start
  • .align-items-end or .align-items-{xs,sm,md,lg,xl,xxl}-end
  • .align-items-center or .align-items-{xs,sm,md,lg,xl,xxl}-center
  • .align-items-baseline or .align-items-{xs,sm,md,lg,xl,xxl}-baseline
  • .align-items-stretch or .align-items-{xs,sm,md,lg,xl,xxl}-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

Order

Use order utilities on flexbox containers to change the order of flex items.

  • .order-first or .order-{xs,sm,md,lg,xl,xxl}-first
  • .order-last or .order-{xs,sm,md,lg,xl,xxl}-last
  • .order-none or .order-{xs,sm,md,lg,xl,xxl}-none
  • .order-1 or .order-{xs,sm,md,lg,xl,xxl}-1
  • .order-2 or .order-{xs,sm,md,lg,xl,xxl}-2
  • .order-3 or .order-{xs,sm,md,lg,xl,xxl}-3
  • .order-4 or .order-{xs,sm,md,lg,xl,xxl}-4
  • .order-5 or .order-{xs,sm,md,lg,xl,xxl}-5
  • .order-6 or .order-{xs,sm,md,lg,xl,xxl}-6
  • .order-7 or .order-{xs,sm,md,lg,xl,xxl}-7
  • .order-8 or .order-{xs,sm,md,lg,xl,xxl}-8
  • .order-9 or .order-{xs,sm,md,lg,xl,xxl}-9
  • .order-10 or .order-{xs,sm,md,lg,xl,xxl}-10
  • .order-11 or .order-{xs,sm,md,lg,xl,xxl}-11
  • .order-12 or .order-{xs,sm,md,lg,xl,xxl}-12


.order-first on child

item 1
item 2
.order-first
item 3


.order-last on child

item 1
item 2
.order-last
item 3


.order-last on child for larger screens (LG - min-width of the screen of 1280px)

item 1
item 2
.order-lg-last
item 3


.order-5, .order-4, .order-3, .order-2, .order-1 on child

item 1
.order-5
item 2
.order-1
item 3
.order-4
item 4
.order-3
item 5
.order-2
				
<!-- 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>

<!-- Order items -->
<div class="d-flex">
   <div class="order-first">...</div>
   <div class="order-4">...</div>
</div>