Bootstrap4 Flex (Flexible) Layout
Bootstrap4 controls the layout of the page through flex classes.
Flexbox
The most significant difference between Bootstrap 3 and Bootstrap 4 is that Bootstrap 4 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: IE9 and below do not support flexbox, so if you need to be compatible with IE8-9, please use Bootstrap 3.
The following example uses the d-flex class to create a flexbox container 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, you can 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 make a flex item take up the remaining space. In the following example, the first two items take up only the space they need, and the last one takes up 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 shrink rules for flex items.
Ordering
The .order classes 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
The .mr-auto class sets the right margin of the item to auto, i.e., margin-right: auto!important;, and .ml-auto sets the left margin of the item to auto, i.e., margin-left: auto!important;:
Example
<div class="d-flex bg-secondary">
<div class="p-2 mr-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 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 ml-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. These classes determine 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 values including: .align-content-start (default), .align-content-end, .align-content-center, .align-content-between, .align-content-around, and .align-content-stretch.
These classes are ineffective when there is only one line of flex items.
Examples
<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 the alignment of child elements in a single row, 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).
Examples
<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>
Specific Child Element Alignment
To set the alignment of specific 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).
Examples
<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 items horizontally for different screen devices | Try it |
| .flex-*-row-reverse | Display flex items horizontally and right-aligned for different screen devices | Try it |
| .flex-*-column | Display flex items vertically for different screen devices | Try it |
| .flex-*-column-reverse | Display flex items vertically and reversed for different screen devices | Try it |
| Ordering | ||
| .order-*-0-12 | Modify the order on small screen sizes | Try it |
| Content Alignment | ||
| .justify-content-*-start | Display flex items at the start on different screen devices (left-aligned) | Try it |
| .justify-content-*-end | Display flex items at the end on different screen devices (right-aligned) | Try it |
| .justify-content-*-center | Center flex items in the flex container on different screen devices | Try it |
| .justify-content-*-between | Use "between" to display flex items on different screen devices | Try it |
| .justify-content-*-around | Use "around" to display flex items on different screen devices | Try it |
| Equal Width | ||
| .flex-*-fill | Force equal widths on different screen devices | Try it |
| Expand | ||
| .flex-*-grow-0 | Do not set expansion on different screen devices | |
| .flex-*-grow-1 | Set expansion 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 on different screen devices | Try it |
| .align-content-*-end | Stack elements at the end on different screen devices | Try it |
| .align-content-*-center | Stack elements in the center on different screen devices | Try it |
| .align-content-*-around | Use "around" to stack elements on different screen devices | Try it |
| .align-content-*-stretch | Stack elements by stretching them on different screen devices | Try it |
| Item Alignment | ||
| .align-items-*-start | Align items at the start on different screen devices | Try it |
| .align-items-*-end | Align elements at the end of the row for different screen devices. | Try it |
| .align-items-*-center | Align elements in the center of the row for different screen devices. | Try it |
| .align-items-*-baseline | Align elements on the baseline of the row for different screen devices. | Try it |
| .align-items-*-stretch | Stretch elements to fill the height of the row 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 |