Bootstrap 5 Flexbox

Flexible Box

The biggest difference between Bootstrap 3 and Bootstrap 4 & 5 is that Bootstrap 5 now uses flexbox instead of floats to handle layout.

The flexible box layout module can make it easier to design flexible responsive layout structures without using floats or positioning.

If you are not familiar with flex, you can learn more about it in our CSS Flexbox Tutorial Learn more.

Note:IE9 and earlier versions do not support Flexbox.

Note:If you need support for IE8-9, please use Bootstrap 3. It is the most stable version of Bootstrap, and the team still supports it for critical error fixes and documentation changes. However, no new features will be added to it.

Instance

To create a flexbox container and convert direct children to flex items, please use d-flex Class:

<div class="d-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">Flexible Item 1</div>
  <div class="p-2 bg-warning">Flexible Item 2</div>
  <div class="p-2 bg-primary">Flexible Item 3</div>
</div>

Try it yourself

Instance

To create an inline flexbox container, please use d-inline-flex Class:

<div class="d-inline-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">Flexible Item 1</div>
  <div class="p-2 bg-warning">Flexible Item 2</div>
  <div class="p-2 bg-primary">Flexible Item 3</div>
</div>

Try it yourself

Horizontal direction

Please use .flex-row Display flexible items horizontally (side by side). This is the default setting.

Tip:Using .flex-row-reverse Can be aligned to the right horizontally:

Instance

<div class="d-flex flex-row bg-secondary">
  <div class="p-2 bg-info">Flexible Item 1</div>
  <div class="p-2 bg-warning">Flexible Item 2</div>
  <div class="p-2 bg-primary">Flexible Item 3</div>
</div>
<div class="d-flex flex-row-reverse bg-secondary">
  <div class="p-2 bg-info">Flexible Item 1</div>
  <div class="p-2 bg-warning">Flexible Item 2</div>
  <div class="p-2 bg-primary">Flexible Item 3</div>
</div>

Try it yourself

Vertical direction

Please use .flex-column Display flex items vertically (stacked on top of each other), or use .flex-column-reverse Reverse the vertical direction:

Instance

<div class="d-flex flex-column">
  <div class="p-2 bg-info">Flexible Item 1</div>
  <div class="p-2 bg-warning">Flexible Item 2</div>
  <div class="p-2 bg-primary">Flexible Item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2 bg-info">Flexible Item 1</div>
  <div class="p-2 bg-warning">Flexible Item 2</div>
  <div class="p-2 bg-primary">Flexible Item 3</div>
</div>

Try it yourself

Align Content

Using .justify-content-* The class can change the alignment of flexible items. Valid classes are:

  • start(Default)
  • end
  • center
  • between
  • around

Instance

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

Try it yourself

Equal width

Use it on flex items .flex-fill They can be forced to be of equal width:

Instance

<div class="d-flex">
  <div class="p-2 bg-info flex-fill">Flexible item 1</div>
  <div class="p-2 bg-warning flex-fill">Flexible item 2</div>
  <div class="p-2 bg-primary flex-fill">Flexible item 3</div>
</div>

Try it yourself

Expand

Use it on flex items .flex-grow-1 The extra space can be occupied. In the following example, the first two flex items occupy the necessary space, while the last item occupies the remaining available space:

Instance

<div class="d-flex">
  <div class="p-2 bg-info">Flexible Item 1</div>
  <div class="p-2 bg-warning">Flexible Item 2</div>
  <div class="p-2 bg-primary flex-grow-1">Flexible Item 3</div>
</div>

Try it yourself

Tip:Use it on flex items .flex-shrink-1 It can contract when necessary.

Order

Using .order The class can change the visual order of a specific flex item. Valid classes range from 0 to 5, with the lowest number having the highest priority (order-1 appears before order-2, and so on):

Instance

<div class="d-flex bg-secondary">
  <div class="p-2 bg-info order-3">Flexible Item 1</div>
  <div class="p-2 bg-warning order-2">Flexible Item 2</div>
  <div class="p-2 bg-primary order-1">Flexible Item 3</div>
</div>

Try it yourself

Automatic margin

Using .ms-auto(pushing the item to the right) or use .me-auto(pushing the item to the left) It is easy to add automatic margins to the flexible items:

Instance

<div class="d-flex bg-secondary">
  <div class="p-2 ms-auto bg-info">Flexible Item 1</div>
  <div class="p-2 bg-warning">Flexible Item 2</div>
  <div class="p-2 bg-primary">Flexible Item 3</div>
</div>
<div class="d-flex bg-secondary">
  <div class="p-2 bg-info">Flexible Item 1</div>
  <div class="p-2 bg-warning">Flexible Item 2</div>
  <div class="p-2 me-auto bg-primary">Flexible Item 3</div>
</div>

Try it yourself

Wrap

By .flex-nowrap(default),.flex-wrap or .flex-wrap-reverseIt can control how the flex items wrap in the flex container.

Instance

<div class="d-flex flex-wrap">..</div>
<div class="d-flex flex-wrap-reverse">..</div>
<div class="d-flex flex-nowrap">..</div>

Try it yourself

Align Content

Please use .align-content-* The vertical alignment method of the flexible items is controlled. Valid classes are:

  • .align-content-start(Default)
  • .align-content-end
  • .align-content-center
  • .align-content-between
  • .align-content-around
  • .align-content-stretch

Note:These classes have no effect on single-line elastic items.

Please click the button below to view the differences between the five classes by changing the vertical alignment of the elastic items in the instance box:

Instance

<div class="d-flex flex-wrap align-content-start">..</div>
<div class="d-flex flex-wrap align-content-end">..</div>
<div class="d-flex flex-wrap align-content-center">..</div>
<div class="d-flex flex-wrap align-content-around">..</div>
<div class="d-flex flex-wrap align-content-stretch">..</div>

Try it yourself

Align Items

Please use .align-items-* Class controlSingle lineThe vertical alignment of elastic items. Valid classes are:

  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch(Default)

Please click the button below to view the differences between the five classes:

Instance

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

Try it yourself

self alignment

Please use .align-self-* Class controlSpecify elastic itemsThe vertical alignment method. Valid classes are:

  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch(Default)

Click the button below to see the difference between the five classes:

Instance

<div class="d-flex bg-light" style="height:150px">
  <div class="p-2 border">Flex item 1</div>
  <div class="p-2 border align-self-start">Flex item 2</div>
  <div class="p-2 border">Flex item 3</div>
</div>

Try it yourself

Responsive Flex Classes

All flexible classes come with additional responsive classes, making it easy to set specific flex classes at specific screen sizes.

* symbol can be replaced with sm, md, lg, xl, or xxl, representing small, medium, large, extra-large, and extra-extra-large screens respectively.

Search for specific flexible classes ...

Class Description Examples
Flexible container
.d-*-flex Create a flexbox container for different screens. Try It
.d-*-inline-flex Create a flexbox container in-line for different screens. Try It
Direction
.flex-*-row Display flexible items horizontally on different screens. Try It
.flex-*-row-reverse Display flexible items horizontally and aligned to the right on different screens. Try It
.flex-*-column Display flexible items vertically on different screens. Try It
.flex-*-column-reverse Display flexible items vertically in the opposite order on different screens. Try It
Content aligned in the same row
.justify-content-*-start Display flexible items from the beginning (left-aligned) on different screens. Try It
.justify-content-*-end Display flexible items at the end (right-aligned) on different screens. Try It
.justify-content-*-center Display flexible items in the center of the flexible container on different screens. Try It
.justify-content-*-between Display flexible items evenly on different screens. Try It
.justify-content-*-around Display flexible items 'around' on different screens. Try It
Fill / Equal width
.flex-*-fill Force the flexible items to have equal width on different screens. Try It
Expand
.flex-*-grow-0 Do not allow items to expand on different screens.
.flex-*-grow-1 Make items expand on different screens.
Shrink
.flex-*-shrink-0 Do not allow items to shrink across different screens.
.flex-*-shrink-1 Make items shrink across different screens.
Order
.order-*-0-12 Change the order from 0 to 12 on small screens. Try It
Wrap
.flex-*-nowrap Do not wrap items across different screens. Try It
.flex-*-wrap Wrap items across different screens. Try It
.flex-*-wrap-reverse Reverse the wrapping of items across different screens. Try It
Align Content
.align-content-*-start Align items from the start of different screens. Try It
.align-content-*-end Align items at the end of different screens. Try It
.align-content-*-center Align items at the center of different screens. Try It
.align-content-*-around Align items around the edges of different screens. Try It
.align-content-*-stretch Stretch items across different screens. Try It
Align Items
.align-items-*-start Align from the start of different screens. Try It
.align-items-*-end Align single-line items at the end of different screens. Try It
.align-items-*-center Align single-line items at the center of different screens. Try It
.align-items-*-baseline Align single-line items on the baselines of different screens. Try It
.align-items-*-stretch Stretch single-line items across different screens. Try It
Align Self
.align-self-*-start Align from the start of different screens. Try It
.align-self-*-end Align at the end of different screens. Try It
.align-self-*-center Align flexible items at the center of different screens. Try It
.align-self-*-baseline Align flexible items on the baselines of different screens. Try It
.align-self-*-stretch Stretch flexible items across different screens. Try It