Bootstrap 5 Learning Kit – Reference

Container

Flexbox container

Inline flexbox container

<div class="d-flex">Flexbox container</div>
<div class="d-inline-flex">Inline flexbox container</div>

<div class="d-flex">Flexbox container</div> <div class="d-inline-flex">Inline flexbox container</div>

Direction

Row

Flex direction row

Row-reverse

Flex direction row-reverse

Column

Flex direction column

Column-reverse

Flex direction column-reverse

<h4 class="h5 text-muted mt-3">Row</h4>
<div class="d-flex flex-row">
  <div>Flex direction row</div>
  <div>Flex direction row</div>
  <div>Flex direction row</div>
</div>
<h4 class="h5 text-muted mt-3">Row-reverse</h4>
<div class="d-flex flex-row-reverse">
  <div>Flex direction row-reverse</div>
  <div>Flex direction row-reverse</div>
  <div>Flex direction row-reverse</div>
</div>
<h4 class="h5 text-muted mt-3">Column</h4>
<div class="d-flex flex-column">
  <div>Flex direction column</div>
  <div>Flex direction column</div>
  <div>Flex direction column</div>
</div>
<h4 class="h5 text-muted mt-3">Column-reverse</h4>
<div class="d-flex flex-column-reverse">
  <div>Flex direction column-reverse</div>
  <div>Flex direction column-reverse</div>
  <div>Flex direction column-reverse</div>
</div>

<h4 class="h5 text-muted mt-3">Row</h4> <div class="d-flex flex-row"> <div>Flex direction row</div> <div>Flex direction row</div> <div>Flex direction row</div> </div> <h4 class="h5 text-muted mt-3">Row-reverse</h4> <div class="d-flex flex-row-reverse"> <div>Flex direction row-reverse</div> <div>Flex direction row-reverse</div> <div>Flex direction row-reverse</div> </div> <h4 class="h5 text-muted mt-3">Column</h4> <div class="d-flex flex-column"> <div>Flex direction column</div> <div>Flex direction column</div> <div>Flex direction column</div> </div> <h4 class="h5 text-muted mt-3">Column-reverse</h4> <div class="d-flex flex-column-reverse"> <div>Flex direction column-reverse</div> <div>Flex direction column-reverse</div> <div>Flex direction column-reverse</div> </div>

Justify content

Start

Justify content start

Center

Justify content center

End

Justify content end

Between

Justify content between

Around

Justify content around

<h4 class="h5 text-muted mt-3">Start</h4>
<div class="d-flex justify-content-start">
  <div>Justify content start</div>
  <div>Justify content start</div>
  <div>Justify content start</div>
</div>
<h4 class="h5 text-muted mt-3">Center</h4>
<div class="d-flex justify-content-center">
  <div>Justify content center</div>
  <div>Justify content center</div>
  <div>Justify content center</div>
</div>
<h4 class="h5 text-muted mt-3">End</h4>
<div class="d-flex justify-content-end">
  <div>Justify content end</div>
  <div>Justify content end</div>
  <div>Justify content end</div>
</div>
<h4 class="h5 text-muted mt-3">Between</h4>
<div class="d-flex justify-content-between">
  <div>Justify content between</div>
  <div>Justify content between</div>
  <div>Justify content between</div>
</div>
<h4 class="h5 text-muted mt-3">Around</h4>
<div class="d-flex justify-content-around">
  <div>Justify content around</div>
  <div>Justify content around</div>
  <div>Justify content around</div>
</div>

<h4 class="h5 text-muted mt-3">Start</h4> <div class="d-flex justify-content-start"> <div>Justify content start</div> <div>Justify content start</div> <div>Justify content start</div> </div> <h4 class="h5 text-muted mt-3">Center</h4> <div class="d-flex justify-content-center"> <div>Justify content center</div> <div>Justify content center</div> <div>Justify content center</div> </div> <h4 class="h5 text-muted mt-3">End</h4> <div class="d-flex justify-content-end"> <div>Justify content end</div> <div>Justify content end</div> <div>Justify content end</div> </div> <h4 class="h5 text-muted mt-3">Between</h4> <div class="d-flex justify-content-between"> <div>Justify content between</div> <div>Justify content between</div> <div>Justify content between</div> </div> <h4 class="h5 text-muted mt-3">Around</h4> <div class="d-flex justify-content-around"> <div>Justify content around</div> <div>Justify content around</div> <div>Justify content around</div> </div>

Align items

Start

Align items start

Center

Align items center

End

Align items end

Baseline

Align items baseline

Stretch

Align items stretch

<h4 class="h5 text-muted mt-3">Start</h4>
<div class="d-flex align-items-start">
  <div>Align items start</div>
  <div>Align items start</div>
  <div>Align items start</div>
</div>
<h4 class="h5 text-muted mt-3">Center</h4>
<div class="d-flex align-items-center">
  <div>Align items center</div>
  <div>Align items center</div>
  <div>Align items center</div>
</div>
<h4 class="h5 text-muted mt-3">End</h4>
<div class="d-flex align-items-end">
  <div>Align items end</div>
  <div>Align items end</div>
  <div>Align items end</div>
</div>
<h4 class="h5 text-muted mt-3">Baseline</h4>
<div class="d-flex align-items-baseline">
  <div>Align items baseline</div>
  <div>Align items baseline</div>
  <div>Align items baseline</div>
</div>
<h4 class="h5 text-muted mt-3">Stretch</h4>
<div class="d-flex align-items-stretch">
  <div>Align items stretch</div>
  <div>Align items stretch</div>
  <div>Align items stretch</div>
</div>

<h4 class="h5 text-muted mt-3">Start</h4> <div class="d-flex align-items-start"> <div>Align items start</div> <div>Align items start</div> <div>Align items start</div> </div> <h4 class="h5 text-muted mt-3">Center</h4> <div class="d-flex align-items-center"> <div>Align items center</div> <div>Align items center</div> <div>Align items center</div> </div> <h4 class="h5 text-muted mt-3">End</h4> <div class="d-flex align-items-end"> <div>Align items end</div> <div>Align items end</div> <div>Align items end</div> </div> <h4 class="h5 text-muted mt-3">Baseline</h4> <div class="d-flex align-items-baseline"> <div>Align items baseline</div> <div>Align items baseline</div> <div>Align items baseline</div> </div> <h4 class="h5 text-muted mt-3">Stretch</h4> <div class="d-flex align-items-stretch"> <div>Align items stretch</div> <div>Align items stretch</div> <div>Align items stretch</div> </div>

Align self

Start

Align self start

Flex item

Center

Align self center

Flex item

End

Align self end

Flex item

Baseline

Align self baseline

Flex item

Stretch

Align self stretch

Flex item

<h4 class="h5 text-muted mt-3">Start</h4>
<div class="d-flex" data-example="alignSelf">
  <div class="align-self-start">Align self start</div>
  <div>Flex item</div>
  <div>Flex item</div>
</div>
<h4 class="h5 text-muted mt-3">Center</h4>
<div class="d-flex" data-example="alignSelf">
  <div class="align-self-center">Align self center</div>
  <div>Flex item</div>
  <div>Flex item</div>
</div>
<h4 class="h5 text-muted mt-3">End</h4>
<div class="d-flex" data-example="alignSelf">
  <div class="align-self-end">Align self end</div>
  <div>Flex item</div>
  <div>Flex item</div>
</div>
<h4 class="h5 text-muted mt-3">Baseline</h4>
<div class="d-flex" data-example="alignSelf">
  <div class="align-self-baseline">Align self baseline</div>
  <div>Flex item</div>
  <div>Flex item</div>
</div>
<h4 class="h5 text-muted mt-3">Stretch</h4>
<div class="d-flex" data-example="alignSelf">
  <div class="align-self-stretch">Align self stretch</div>
  <div>Flex item</div>
  <div>Flex item</div>
</div>

<h4 class="h5 text-muted mt-3">Start</h4> <div class="d-flex" data-example="alignSelf"> <div class="align-self-start">Align self start</div> <div>Flex item</div> <div>Flex item</div> </div> <h4 class="h5 text-muted mt-3">Center</h4> <div class="d-flex" data-example="alignSelf"> <div class="align-self-center">Align self center</div> <div>Flex item</div> <div>Flex item</div> </div> <h4 class="h5 text-muted mt-3">End</h4> <div class="d-flex" data-example="alignSelf"> <div class="align-self-end">Align self end</div> <div>Flex item</div> <div>Flex item</div> </div> <h4 class="h5 text-muted mt-3">Baseline</h4> <div class="d-flex" data-example="alignSelf"> <div class="align-self-baseline">Align self baseline</div> <div>Flex item</div> <div>Flex item</div> </div> <h4 class="h5 text-muted mt-3">Stretch</h4> <div class="d-flex" data-example="alignSelf"> <div class="align-self-stretch">Align self stretch</div> <div>Flex item</div> <div>Flex item</div> </div>

Auto margins

Horizontal

Flex item

Margin left auto

Margin right auto

Flex item

Vertical

Margin bottom auto

Flex item

Margin top auto

<h4 class="h5 text-muted mt-3">Horizontal</h4>
<div class="d-flex justify-content-start">
  <div>Flex item</div>
  <div>Flex item</div>
  <div class="ms-auto">Margin left auto</div>
</div>
<div class="d-flex justify-content-end">
  <div class="me-auto">Margin right auto</div>
  <div>Flex item</div>
  <div>Flex item</div>
</div>
<h4 class="h5 text-muted mt-3">Vertical</h4>
<div class="d-flex flex-column align-items-start">
  <div class="mb-auto">Margin bottom auto</div>
  <div>Flex item</div>
  <div>Flex item</div>
</div>
<div class="d-flex flex-column align-items-end">
  <div>Flex item</div>
  <div>Flex item</div>
  <div class="mt-auto">Margin top auto</div>
</div>

<h4 class="h5 text-muted mt-3">Horizontal</h4> <div class="d-flex justify-content-start"> <div>Flex item</div> <div>Flex item</div> <div class="ms-auto">Margin left auto</div> </div> <div class="d-flex justify-content-end"> <div class="me-auto">Margin right auto</div> <div>Flex item</div> <div>Flex item</div> </div> <h4 class="h5 text-muted mt-3">Vertical</h4> <div class="d-flex flex-column align-items-start"> <div class="mb-auto">Margin bottom auto</div> <div>Flex item</div> <div>Flex item</div> </div> <div class="d-flex flex-column align-items-end"> <div>Flex item</div> <div>Flex item</div> <div class="mt-auto">Margin top auto</div> </div>

Fill

Flex fill

<div class="d-flex">
  <div class="flex-fill">Flex fill</div>
  <div class="flex-fill">Flex fill</div>
  <div class="flex-fill">Flex fill</div>
</div>

Grow

Flex grow

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

Shrink

Flex shrink

<div class="d-flex">
  <div class="w-50">Flex shrink</div>
  <div class="w-50">Flex shrink</div>
  <div class="flex-shrink-1">Flex shrink</div>
</div>

<div class="d-flex"> <div class="w-50">Flex shrink</div> <div class="w-50">Flex shrink</div> <div class="flex-shrink-1">Flex shrink</div> </div>

Wrap

Nowrap

Flex-wrap nowrap

Wrap

Flex-wrap wrap

Wrap-reverse

Flex-wrap reverse

<h4 class="h5 text-muted mt-3">Nowrap</h4>
<div class="d-flex flex-nowrap">
  <div>Flex-wrap nowrap</div>
  <div>Flex-wrap nowrap</div>
  <div>Flex-wrap nowrap</div>
  <div>Flex-wrap nowrap</div>
  <div>Flex-wrap nowrap</div>
  <div>Flex-wrap nowrap</div>
  <div>Flex-wrap nowrap</div>
  <div>Flex-wrap nowrap</div>
  <div>Flex-wrap nowrap</div>
  <div>Flex-wrap nowrap</div>
</div>
<h4 class="h5 text-muted mt-3">Wrap</h4>
<div class="d-flex flex-wrap">
  <div>Flex-wrap wrap</div>
  <div>Flex-wrap wrap</div>
  <div>Flex-wrap wrap</div>
  <div>Flex-wrap wrap</div>
  <div>Flex-wrap wrap</div>
  <div>Flex-wrap wrap</div>
  <div>Flex-wrap wrap</div>
  <div>Flex-wrap wrap</div>
  <div>Flex-wrap wrap</div>
  <div>Flex-wrap wrap</div>
</div>
<h4 class="h5 text-muted mt-3">Wrap-reverse</h4>
<div class="d-flex flex-wrap-reverse">
  <div>Flex-wrap reverse</div>
  <div>Flex-wrap reverse</div>
  <div>Flex-wrap reverse</div>
  <div>Flex-wrap reverse</div>
  <div>Flex-wrap reverse</div>
  <div>Flex-wrap reverse</div>
  <div>Flex-wrap reverse</div>
  <div>Flex-wrap reverse</div>
  <div>Flex-wrap reverse</div>
  <div>Flex-wrap reverse</div>
</div>

<h4 class="h5 text-muted mt-3">Nowrap</h4> <div class="d-flex flex-nowrap"> <div>Flex-wrap nowrap</div> <div>Flex-wrap nowrap</div> <div>Flex-wrap nowrap</div> <div>Flex-wrap nowrap</div> <div>Flex-wrap nowrap</div> <div>Flex-wrap nowrap</div> <div>Flex-wrap nowrap</div> <div>Flex-wrap nowrap</div> <div>Flex-wrap nowrap</div> <div>Flex-wrap nowrap</div> </div> <h4 class="h5 text-muted mt-3">Wrap</h4> <div class="d-flex flex-wrap"> <div>Flex-wrap wrap</div> <div>Flex-wrap wrap</div> <div>Flex-wrap wrap</div> <div>Flex-wrap wrap</div> <div>Flex-wrap wrap</div> <div>Flex-wrap wrap</div> <div>Flex-wrap wrap</div> <div>Flex-wrap wrap</div> <div>Flex-wrap wrap</div> <div>Flex-wrap wrap</div> </div> <h4 class="h5 text-muted mt-3">Wrap-reverse</h4> <div class="d-flex flex-wrap-reverse"> <div>Flex-wrap reverse</div> <div>Flex-wrap reverse</div> <div>Flex-wrap reverse</div> <div>Flex-wrap reverse</div> <div>Flex-wrap reverse</div> <div>Flex-wrap reverse</div> <div>Flex-wrap reverse</div> <div>Flex-wrap reverse</div> <div>Flex-wrap reverse</div> <div>Flex-wrap reverse</div> </div>

Order

order-first (-1), order-0 to order-5 and order-last (6)

First, but last

Second, but number 5

Third, but number 4

Fourth, but number 3

Fifth, but first

Last, but unordered, so number 2

<div class="d-flex">
  <div class="order-last">First, but last</div>
  <div class="order-3">Second, but number 5</div>
  <div class="order-2">Third, but number 4</div>
  <div class="order-1">Fourth, but number 3</div>
  <div class="order-first">Fifth, but first</div>
  <div>Last, but unordered, so number 2</div>
</div>

<div class="d-flex"> <div class="order-last">First, but last</div> <div class="order-3">Second, but number 5</div> <div class="order-2">Third, but number 4</div> <div class="order-1">Fourth, but number 3</div> <div class="order-first">Fifth, but first</div> <div>Last, but unordered, so number 2</div> </div>

Align content

Start

Align content start

Center

Align content center

End

Align content end

Between

Align content between

Around

Align content around

Stretch

Align content stretch

<h4 class="h5 text-muted mt-3">Start</h4>
<div class="d-flex align-content-start flex-wrap">
  <div>Align content start</div>
  <div>Align content start</div>
  <div>Align content start</div>
  <div>Align content start</div>
  <div>Align content start</div>
  <div>Align content start</div>
  <div>Align content start</div>
  <div>Align content start</div>
  <div>Align content start</div>
  <div>Align content start</div>
</div>
<h4 class="h5 text-muted mt-3">Center</h4>
<div class="d-flex align-content-center flex-wrap">
  <div>Align content center</div>
  <div>Align content center</div>
  <div>Align content center</div>
  <div>Align content center</div>
  <div>Align content center</div>
  <div>Align content center</div>
  <div>Align content center</div>
  <div>Align content center</div>
  <div>Align content center</div>
  <div>Align content center</div>
</div>
<h4 class="h5 text-muted mt-3">End</h4>
<div class="d-flex align-content-end flex-wrap">
  <div>Align content end</div>
  <div>Align content end</div>
  <div>Align content end</div>
  <div>Align content end</div>
  <div>Align content end</div>
  <div>Align content end</div>
  <div>Align content end</div>
  <div>Align content end</div>
  <div>Align content end</div>
  <div>Align content end</div>
</div>
<h4 class="h5 text-muted mt-3">Between</h4>
<div class="d-flex align-content-between flex-wrap">
  <div>Align content between</div>
  <div>Align content between</div>
  <div>Align content between</div>
  <div>Align content between</div>
  <div>Align content between</div>
  <div>Align content between</div>
  <div>Align content between</div>
  <div>Align content between</div>
  <div>Align content between</div>
  <div>Align content between</div>
</div>
<h4 class="h5 text-muted mt-3">Around</h4>
<div class="d-flex align-content-around flex-wrap">
  <div>Align content around</div>
  <div>Align content around</div>
  <div>Align content around</div>
  <div>Align content around</div>
  <div>Align content around</div>
  <div>Align content around</div>
  <div>Align content around</div>
  <div>Align content around</div>
  <div>Align content around</div>
  <div>Align content around</div>
</div>
<h4 class="h5 text-muted mt-3">Stretch</h4>
<div class="d-flex align-content-stretch flex-wrap">
  <div>Align content stretch</div>
  <div>Align content stretch</div>
  <div>Align content stretch</div>
  <div>Align content stretch</div>
  <div>Align content stretch</div>
  <div>Align content stretch</div>
  <div>Align content stretch</div>
  <div>Align content stretch</div>
  <div>Align content stretch</div>
  <div>Align content stretch</div>
</div>

<h4 class="h5 text-muted mt-3">Start</h4> <div class="d-flex align-content-start flex-wrap"> <div>Align content start</div> <div>Align content start</div> <div>Align content start</div> <div>Align content start</div> <div>Align content start</div> <div>Align content start</div> <div>Align content start</div> <div>Align content start</div> <div>Align content start</div> <div>Align content start</div> </div> <h4 class="h5 text-muted mt-3">Center</h4> <div class="d-flex align-content-center flex-wrap"> <div>Align content center</div> <div>Align content center</div> <div>Align content center</div> <div>Align content center</div> <div>Align content center</div> <div>Align content center</div> <div>Align content center</div> <div>Align content center</div> <div>Align content center</div> <div>Align content center</div> </div> <h4 class="h5 text-muted mt-3">End</h4> <div class="d-flex align-content-end flex-wrap"> <div>Align content end</div> <div>Align content end</div> <div>Align content end</div> <div>Align content end</div> <div>Align content end</div> <div>Align content end</div> <div>Align content end</div> <div>Align content end</div> <div>Align content end</div> <div>Align content end</div> </div> <h4 class="h5 text-muted mt-3">Between</h4> <div class="d-flex align-content-between flex-wrap"> <div>Align content between</div> <div>Align content between</div> <div>Align content between</div> <div>Align content between</div> <div>Align content between</div> <div>Align content between</div> <div>Align content between</div> <div>Align content between</div> <div>Align content between</div> <div>Align content between</div> </div> <h4 class="h5 text-muted mt-3">Around</h4> <div class="d-flex align-content-around flex-wrap"> <div>Align content around</div> <div>Align content around</div> <div>Align content around</div> <div>Align content around</div> <div>Align content around</div> <div>Align content around</div> <div>Align content around</div> <div>Align content around</div> <div>Align content around</div> <div>Align content around</div> </div> <h4 class="h5 text-muted mt-3">Stretch</h4> <div class="d-flex align-content-stretch flex-wrap"> <div>Align content stretch</div> <div>Align content stretch</div> <div>Align content stretch</div> <div>Align content stretch</div> <div>Align content stretch</div> <div>Align content stretch</div> <div>Align content stretch</div> <div>Align content stretch</div> <div>Align content stretch</div> <div>Align content stretch</div> </div>

Responsive examples

Responsive utility classes exist for all the flexbox utilities: display, flex-direction, justify-content, align-items, align-self, flex-wrap, order and align-content. The examples are hidden on the screen, but can be viewed in the source code or by clicking "Toggle code" below.

Display flex for small devices and up

Display inline-flex for medium devices and up

Display flex for all devices and set flex direction to row for large devices and up

Display flex for all devices and set flex direction to row-reverse for extra large devices and up

Display flex for all devices and set flex direction to column for extra extra large devices and up

Display flex for all devices and set flex direction to column-reverse for small devices and up

Display flex for all devices and justify content to the start for medium devices and up

Display flex for all devices and justify content to the center for large devices and up

Display flex for all devices and justify content to the end for extra large devices and up

Display flex for all devices and justify content between for extra extra large devices and up

Display flex for all devices and justify content around for small devices and up

Display flex for all devices and align items to the start for medium devices and up

Display flex for all devices and align items to the center for large devices and up

Display flex for all devices and align items to the end for extra large devices and up

Display flex for all devices and align items to the baseline for extra extra large devices and up

Display flex for all devices and align items to stretch for small devices and up

Align self to the start for medium devices and up

Align self to the center for large devices and up

Align self to the end for extra large devices and up

Align self to the baseline for extra extra large devices and up

Align self to stretch for small devices and up

Fill item for medium devices and up

Grow item for large devices and up

Shrink item for extra large devices and up

Display flex for all devices and make items not wrap for extra extra large devices and up

Display flex for all devices and make items wrap for small devices and up

Display flex for all devices and make items wrap in reverse for medium devices and up

Set the order to 3 for large devices and up

Set the order to 2 for extra large devices and up

Set the order to 1 for extra extra large devices and up

Display flex for all devices and align content to the start for small devices and up

Display flex for all devices and align content to the center for medium devices and up

Display flex for all devices and align content to the end for large devices and up

Display flex for all devices and align content around for extra large devices and up

Display flex for all devices and align content to stretch for extra extra large devices and up

<div class="responsive-examples">
  <div class="d-sm-flex">Display flex for small devices and up</div>
  <div class="d-md-inline-flex">Display inline-flex for medium devices and up</div>
  <div class="d-flex flex-lg-row">Display flex for all devices and set flex direction to row for large devices and up</div>
  <div class="d-flex flex-xl-row-reverse">Display flex for all devices and set flex direction to row-reverse for extra large devices and up</div>
  <div class="d-flex flex-xxl-column">Display flex for all devices and set flex direction to column for extra extra large devices and up</div>
  <div class="d-flex flex-sm-column-reverse">Display flex for all devices and set flex direction to column-reverse for small devices and up</div>
  <div class="d-flex justify-content-md-start">Display flex for all devices and justify content to the start for medium devices and up</div>
  <div class="d-flex justify-content-lg-center">Display flex for all devices and justify content to the center for large devices and up</div>
  <div class="d-flex justify-content-xl-end">Display flex for all devices and justify content to the end for extra large devices and up</div>
  <div class="d-flex justify-content-xxl-between">Display flex for all devices and justify content between for extra extra large devices and up</div>
  <div class="d-flex justify-content-sm-around">Display flex for all devices and justify content around for small devices and up</div>
  <div class="d-flex align-items-md-start">Display flex for all devices and align items to the start for medium devices and up</div>
  <div class="d-flex align-items-lg-center">Display flex for all devices and align items to the center for large devices and up</div>
  <div class="d-flex align-items-xl-end">Display flex for all devices and align items to the end for extra large devices and up</div>
  <div class="d-flex align-items-xxl-baseline">Display flex for all devices and align items to the baseline for extra extra large devices and up</div>
  <div class="d-flex align-items-sm-stretch">Display flex for all devices and align items to stretch for small devices and up</div>
  <div class="d-flex">
    <div class="align-self-md-start">Align self to the start for medium devices and up</div>
  </div>
  <div class="d-flex">
    <div class="align-self-lg-center">Align self to the center for large devices and up</div>
  </div>
  <div class="d-flex">
    <div class="align-self-xl-end">Align self to the end for extra large devices and up</div>
  </div>
  <div class="d-flex">
    <div class="align-self-xxl-baseline">Align self to the baseline for extra extra large devices and up</div>
  </div>
  <div class="d-flex">
    <div class="align-self-sm-stretch">Align self to stretch for small devices and up</div>
  </div>
  <div class="d-flex">
    <div class="flex-md-fill">Fill item for medium devices and up</div>
  </div>
  <div class="d-flex">
    <div class="flex-lg-grow-1">Grow item for large devices and up</div>
  </div>
  <div class="d-flex">
    <div class="flex-xl-shrink-1">Shrink item for extra large devices and up</div>
  </div>
  <div class="d-flex flex-xxl-nowrap">Display flex for all devices and make items not wrap for extra extra large devices and up</div>
  <div class="d-flex flex-sm-wrap">Display flex for all devices and make items wrap for small devices and up</div>
  <div class="d-flex flex-md-wrap-reverse">Display flex for all devices and make items wrap in reverse for medium devices and up</div>
  <div class="d-flex">
    <div class="order-lg-3">Set the order to 3 for large devices and up</div>
    <div class="order-xl-2">Set the order to 2 for extra large devices and up</div>
    <div class="order-xxl-1">Set the order to 1 for extra extra large devices and up</div>
  </div>
  <div class="d-flex align-content-sm-start">Display flex for all devices and align content to the start for small devices and up</div>
  <div class="d-flex align-content-md-center">Display flex for all devices and align content to the center for medium devices and up</div>
  <div class="d-flex align-content-lg-end">Display flex for all devices and align content to the end for large devices and up</div>
  <div class="d-flex align-content-xl-around">Display flex for all devices and align content around for extra large devices and up</div>
  <div class="d-flex align-content-xxl-stretch">Display flex for all devices and align content to stretch for extra extra large devices and up</div>
</div>

<div class="responsive-examples"> <div class="d-sm-flex">Display flex for small devices and up</div> <div class="d-md-inline-flex">Display inline-flex for medium devices and up</div> <div class="d-flex flex-lg-row">Display flex for all devices and set flex direction to row for large devices and up</div> <div class="d-flex flex-xl-row-reverse">Display flex for all devices and set flex direction to row-reverse for extra large devices and up</div> <div class="d-flex flex-xxl-column">Display flex for all devices and set flex direction to column for extra extra large devices and up</div> <div class="d-flex flex-sm-column-reverse">Display flex for all devices and set flex direction to column-reverse for small devices and up</div> <div class="d-flex justify-content-md-start">Display flex for all devices and justify content to the start for medium devices and up</div> <div class="d-flex justify-content-lg-center">Display flex for all devices and justify content to the center for large devices and up</div> <div class="d-flex justify-content-xl-end">Display flex for all devices and justify content to the end for extra large devices and up</div> <div class="d-flex justify-content-xxl-between">Display flex for all devices and justify content between for extra extra large devices and up</div> <div class="d-flex justify-content-sm-around">Display flex for all devices and justify content around for small devices and up</div> <div class="d-flex align-items-md-start">Display flex for all devices and align items to the start for medium devices and up</div> <div class="d-flex align-items-lg-center">Display flex for all devices and align items to the center for large devices and up</div> <div class="d-flex align-items-xl-end">Display flex for all devices and align items to the end for extra large devices and up</div> <div class="d-flex align-items-xxl-baseline">Display flex for all devices and align items to the baseline for extra extra large devices and up</div> <div class="d-flex align-items-sm-stretch">Display flex for all devices and align items to stretch for small devices and up</div> <div class="d-flex"> <div class="align-self-md-start">Align self to the start for medium devices and up</div> </div> <div class="d-flex"> <div class="align-self-lg-center">Align self to the center for large devices and up</div> </div> <div class="d-flex"> <div class="align-self-xl-end">Align self to the end for extra large devices and up</div> </div> <div class="d-flex"> <div class="align-self-xxl-baseline">Align self to the baseline for extra extra large devices and up</div> </div> <div class="d-flex"> <div class="align-self-sm-stretch">Align self to stretch for small devices and up</div> </div> <div class="d-flex"> <div class="flex-md-fill">Fill item for medium devices and up</div> </div> <div class="d-flex"> <div class="flex-lg-grow-1">Grow item for large devices and up</div> </div> <div class="d-flex"> <div class="flex-xl-shrink-1">Shrink item for extra large devices and up</div> </div> <div class="d-flex flex-xxl-nowrap">Display flex for all devices and make items not wrap for extra extra large devices and up</div> <div class="d-flex flex-sm-wrap">Display flex for all devices and make items wrap for small devices and up</div> <div class="d-flex flex-md-wrap-reverse">Display flex for all devices and make items wrap in reverse for medium devices and up</div> <div class="d-flex"> <div class="order-lg-3">Set the order to 3 for large devices and up</div> <div class="order-xl-2">Set the order to 2 for extra large devices and up</div> <div class="order-xxl-1">Set the order to 1 for extra extra large devices and up</div> </div> <div class="d-flex align-content-sm-start">Display flex for all devices and align content to the start for small devices and up</div> <div class="d-flex align-content-md-center">Display flex for all devices and align content to the center for medium devices and up</div> <div class="d-flex align-content-lg-end">Display flex for all devices and align content to the end for large devices and up</div> <div class="d-flex align-content-xl-around">Display flex for all devices and align content around for extra large devices and up</div> <div class="d-flex align-content-xxl-stretch">Display flex for all devices and align content to stretch for extra extra large devices and up</div> </div>

Page Navigation:

Flex

Container

Direction

Row

Row-reverse

Column

Column-reverse

Justify content

Start

Center

End

Between

Around

Align items

Start

Center

End

Baseline

Stretch

Align self

Start

Center

End

Baseline

Stretch

Auto margins

Horizontal

Vertical

Fill

Grow

Shrink

Wrap

Nowrap

Wrap

Wrap-reverse

Order

Align content

Start

Center

End

Between

Around

Stretch

Responsive examples