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
- justify content
- align items
- align self
- align content
- flex
- grow and shrink
- auto margins
- wrap
- order
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
.flex-row-reverse
.flex-column
.flex-column-reverse
<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
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
<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
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch
<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
.align-self-end
on child
.align-self-center
on child
.align-self-baseline
on child
.align-self-stretch
on child
<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
.align-content-end
.align-content-center
.align-content-between
.align-content-around
.align-content-stretch
<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;
<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
<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
.me-auto
- pushing items to the right
.ms-auto
- pushing items to the left
<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
Wrap
Wrap reverse
<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
.order-first
.order-last
on child
.order-last
.order-last
on child for larger screens (LG - min-width of the screen of 1280px)
.order-lg-last
.order-5
, .order-4
, .order-3
, .order-2
, .order-1
on child
.order-5
.order-1
.order-4
.order-3
.order-2
<div class="d-flex">
<div class="order-first">...</div>
<div class="order-4">...</div>
</div>