Bootstrap5 Flex (Flexible) Layout
Bootstrap5 controls the layout of the page through flex classes.
Flexbox
The most significant difference between Bootstrap 3 and Bootstrap 4/5 is that Bootstrap 4/5 uses flexbox for layout instead of floats.
Flexbox is a new layout mode in CSS3, more suitable for responsive design. If you are not familiar with flex, you can read our CSS3 Flexbox tutorial.
>
Note: Flexbox is not supported in IE9 and below, so if you need to be compatible with IE8-9, please use Bootstrap 3.
The following example creates a flexbox container using the d-flex class and sets three flex items:
Example
<div class="d-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
To create a flexbox container that displays on the same line, use the d-inline-flex class:
Example
<div class="d-inline-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
Horizontal Direction
.flex-row can set flex items to display horizontally, which is the default.
Use the .flex-row-reverse class for right-aligned display, which is the reverse direction of .flex-row.
Example
<div class="d-flex flex-row bg-secondary">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bg-secondary">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
Vertical Direction
The .flex-column class is used to set flex items to display vertically, and .flex-column-reverse is used to reverse the items:
Example
<div class="d-flex flex-column">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
Content Alignment
The .justify-content-* class is used to modify the alignment of flex items, where * can be start (default), end, center, between, or around:
Example
<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>
Equal Width
The .flex-fill class forces all flex items to be of equal width:
Example
<div class="d-flex">
<div class="p-2 bg-info flex-fill">Flex item 1</div>
<div class="p-2 bg-warning flex-fill">Flex item 2</div>
<div class="p-2 bg-primary flex-fill">Flex item 3</div>
</div>
Expand
.flex-grow-1 is used to allow a flex item to grow and use the remaining space. In the following example, the first two items only take up the space they need, and the last one takes the remaining space:
Example
<div class="d-flex">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary flex-grow-1">Flex item 3</div>
</div>
Note: Use .flex-shrink-1 to set the shrinking rules for flex items.
Ordering
The .order class can be used to set the order of flex items, from .order-1 to .order-12, with lower numbers having higher priority (.order-1 comes before .order-2):
Example
<div class="d-flex bg-secondary">
<div class="p-2 bg-info order-3">Flex item 1</div>
<div class="p-2 bg-warning order-2">Flex item 2</div>
<div class="p-2 bg-primary order-1">Flex item 3</div>
</div>
Margins
.ms-auto class sets the right margin of the item to auto, i.e., margin-right: auto!important;, and .me-auto class sets the left margin of the item to auto, i.e., margin-left: auto!important;:
Example
<div class="d-flex mb-3 bg-secondary">
<div class="p-2 ms-auto bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex mb-3 bg-secondary">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 me-auto bg-primary">Flex item 3</div>
</div>
Wrapping
Flex items can be wrapped within the container using the following classes: .flex-nowrap (default), .flex-wrap, or .flex-wrap-reverse. This sets whether the flex container is single-line or multi-line.
Example
<div class="d-flex flex-wrap">..</div>
<div class="d-flex flex-wrap-reverse">..</div>
<div class="d-flex flex-nowrap">..</div>
Content Alignment
The .align-content-* classes can be used to control how flex items are stacked vertically, with options including: .align-content-start (default), .align-content-end, .align-content-center, .align-content-between, .align-content-around, and .align-content-stretch.
These classes are invalid in flex child elements with only one row.
Example
<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>
Child Element Alignment
To set alignment for single-row child elements, you can use the .align-items-* classes, which include: .align-items-start, .align-items-end, .align-items-center, .align-items-baseline, and .align-items-stretch (default).
Example
<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-around">..</div>
<div class="d-flex align-items-stretch">..</div>
Specified Child Element Alignment
To set alignment for specified child elements, you can use the .align-self-* classes, which include: .align-self-start, .align-self-end, .align-self-center, .align-self-baseline, and .align-self-stretch (default).
Example
<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>
Responsive Flex Classes
| Class | Example | Implementation |
|---|---|---|
| Flex Container | ||
| .d-*-flex | Create a flexbox container for different screen devices | Try it |
| .d-*-inline-flex | Create an inline flexbox container for different screen devices | Try it |
| Direction | ||
| .flex-*-row | Display flex child elements horizontally for different screen devices | Try it |
| .flex-*-row-reverse | Display flex child elements horizontally and right-aligned for different screen devices | Try it |
| .flex-*-column | Display flex child elements vertically for different screen devices | Try it |
| .flex-*-column-reverse | Display flex child elements vertically and in reverse direction for different screen devices | Try it |
| Content Alignment | ||
| .justify-content-*-start | Display flex child elements at the start position (left-aligned) for different screen devices | Try it |
| .justify-content-*-end | Display flex items at the end (right-aligned) on different screen devices | Try it |
| .justify-content-*-center | Center display of flex items in the flex container on different screen devices | Try it |
| .justify-content-*-between | Display flex items using "between" on different screen devices | Try it |
| .justify-content-*-around | Display flex items using "around" on different screen devices | Try it |
| Equal Width | ||
| .flex-*-fill | Force equal width on different screen devices | Try it |
| Grow | ||
| .flex-*-grow-0 | Do not set grow on different screen devices | |
| .flex-*-grow-1 | Set grow on different screen devices | |
| Shrink | ||
| .flex-*-shrink-0 | Do not set shrink on different screen devices | |
| .flex-*-shrink-1 | Set shrink on different screen devices | |
| Wrap | ||
| .flex-*-nowrap | Do not wrap elements on different screen devices | Try it |
| .flex-*-wrap | Wrap elements on different screen devices | Try it |
| .flex-*-wrap-reverse | Reverse wrap elements on different screen devices | Try it |
| Content Alignment | ||
| .align-content-*-start | Stack elements at the start position on different screen devices | Try it |
| .align-content-*-end | Stack elements at the end position on different screen devices | Try it |
| .align-content-*-center | Stack elements at the center position on different screen devices | Try it |
| .align-content-*-around | Stack elements using "around" on different screen devices | Try it |
| .align-content-*-stretch | Stack elements by stretching them on different screen devices | Try it |
| Order | ||
| .order-*-0-12 | Modify the order on small screen sizes | Try it |
| Item Alignment | ||
| .align-items-*-start | Align elements at the start on different screen devices | Try it |
| .align-items-*-end | Align elements at the end on the same line for different screen devices. | Try it |
| .align-items-*-center | Align elements in the center on the same line for different screen devices. | Try it |
| .align-items-*-baseline | Align elements on the baseline on the same line for different screen devices. | Try it |
| .align-items-*-stretch | Stretch elements to fill the height on the same line for different screen devices. | Try it |
| Alignment of a single child element | ||
| .align-self-*-start | Align a single child element at the start for different screen devices. | Try it |
| .align-self-*-end | Align a single child element at the end for different screen devices. | Try it |
| .align-self-*-center | Align a single child element in the center for different screen devices. | Try it |
| .align-self-*-baseline | Align a single child element on the baseline for different screen devices. | Try it |
| .align-self-*-stretch | Stretch a single child element for different screen devices. | Try it |