Flex

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

Below you can find a wide range of helper classes to help you create and tranform the layout of flex containers:

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

item 1
item 2
item 3


.flex-row-reverse

item 1
item 2
item 3


.flex-column

item 1
item 2
item 3


.flex-column-reverse

item 1
item 2
item 3
					


<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

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

item 1
item 2
item 3


.justify-content-end

item 1
item 2
item 3


.justify-content-center

item 1
item 2
item 3


.justify-content-between

item 1
item 2
item 3


.justify-content-around

item 1
item 2
item 3
					


<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

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

item 1
item 2
item 3


.align-items-end

item 1
item 2
item 3


.align-items-center

item 1
item 2
item 3


.align-items-baseline

item 1
item 2
item 3


.align-items-stretch

item 1
item 2
item 3
					


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

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

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


.align-self-start on child

item 1
item 2
item 3


.align-self-end on child

item 1
item 2
item 3


.align-self-center on child

item 1
item 2
item 3


.align-self-baseline on child

item 1
item 2
item 3


.align-self-stretch on child

item 1
item 2
item 3
					


<div class="d-flex">
   <div class="align-self-start">...</div>
</div>

Align content

Use align-content utilities on flexbox containers to align flex items together on the cross axis.

  • .align-content-start or .align-content-{xs,sm,md,lg,xl,xxl}-start (browser default)
  • .align-content-end or .align-content-{xs,sm,md,lg,xl,xxl}-end
  • .align-content-center or .align-content-{xs,sm,md,lg,xl,xxl}-center
  • .align-content-between or .align-content-{xs,sm,md,lg,xl,xxl}-between
  • .align-content-around or .align-content-{xs,sm,md,lg,xl,xxl}-around
  • .align-content-stretch or .align-content-{xs,sm,md,lg,xl,xxl}-stretch


.align-content-start

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8
item 9
item 10


.align-content-end

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8
item 9
item 10


.align-content-center

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8
item 9
item 10


.align-content-between

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8
item 9
item 10


.align-content-around

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8
item 9
item 10


.align-content-stretch

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8
item 9
item 10
					


<div class="d-flex">
   <div class="align-self-start">...</div>
</div>

Flex

Use the classes below to control how flex items both grow and shrink.

  • .flex-auto or .flex-{xs,sm,md,lg,xl,xxl}-auto - flex: 1 1 auto;
  • .flex-1 or .flex-{xs,sm,md,lg,xl,xxl}-1 - flex: 1 1 0%;
  • .flex-initial or .flex-{xs,sm,md,lg,xl,xxl}-initial - flex: 0 1 auto;
  • .flex-none or .flex-{xs,sm,md,lg,xl,xxl}-none - flex: none;


Item 1 with a longer of content added here for testing purposes
Item 2
Item 3
					


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

Grow and shrink

Use .flex-grow-* or .flex-shrink-* utilities to toggle a flex item's ability to grow/shrink to fill available space or shrink if necessary.

  • .flex-grow-0 or .flex-{xs,sm,md,lg,xl,xxl}-grow-0
  • .flex-grow-1 or .flex-{xs,sm,md,lg,xl,xxl}-grow-1
  • .flex-shrink-0 or .flex-{xs,sm,md,lg,xl,xxl}-shrink-0
  • .flex-shrink-1 or .flex-{xs,sm,md,lg,xl,xxl}-shrink-1


Item with flex-grow: 1
Item 2
Item 3


Item with flex-shrink:1
Item 2
					


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




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

Auto margins

With flexbox you can mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (.me-auto), and pushing two items to the left (.ms-auto).

  • .me-auto or .me-{xs,sm,md,lg,xl,xxl}-auto - pushing items to the right
  • .ms-auto or .ms-{xs,sm,md,lg,xl,xxl}-auto - pushing items to the left


No margins
Item 1
Item 2
Item 3


.me-auto - pushing items to the right
Item 1 with me-auto
Item 2
Item 3


.ms-auto - pushing items to the left
Item 1
Item 2
Item 3 with ms-auto
					


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




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

Wrap

Change how flex items wrap in a flex container.

  • .flex-nowrap or .flex-{xs,sm,md,lg,xl,xxl}-nowrap (browser default)
  • .flex-wrap or .flex-{xs,sm,md,lg,xl,xxl}-wrap
  • .flex-wrap-reverse or .flex-{xs,sm,md,lg,xl,xxl}-wrap-reverse


No wrap
Item 1
Item 2
Item 3
Item 4
Item 5


Wrap
Item 1
Item 2
Item 3
Item 4
Item 5


Wrap reverse
Item 1
Item 2
Item 3
Item 4
Item 5
					


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




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

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
					


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