BS4 Flex
Bootstrap 4 Flex
To manage the layout of Bootstrap 4 components, use flex classes.
Flexbox
The primary distinction between Bootstrap 3 and Bootstrap 4 is that the latter now handles layout using flexbox rather than floats.
Without the need for float or positioning, designing flexible, responsive layout structures is made simpler with the help of the Flexible Box Layout Module. You may learn more about flex in our CSS Flexbox Tutorial if you’re new to it.
Note: IE9 and older versions do not support Flexbox.
Use Bootstrap 3 if you need to support IE8–9. It is the most stable version of Bootstrap, and the team continues to maintain it with important updates to the documentation and bug fixes. It won’t, however, get any new features.
Use the d-flex class to generate a flexbox container and convert direct children into flex items:
Example
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>
Use the d-inline-flex class to construct an inline flexbox container:
Example
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
To show the flex items horizontally (side by side), use .flex-row. By default, this is set.
Advice: To right-align the horizontal direction, use .flex-row-reverse:
Example
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
To display the flex items vertically (on top of one another), use .flex-column; to reverse the vertical direction, use .flex-column-reverse.
Example
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>
Justify Content
Modify the alignment of flex items using the .justify-content-* classes. Start (default), end, center, between, and around are acceptable classes.
Example
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>
Fill / Equal Widths
To force flex items into equal widths, use .flex-fill:
Example
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>
Grow
For a flex item to occupy the remaining space, use .flex-grow-1. The final item in the example below occupies the remaining space after the first two flex items have taken up their required space:
Example
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>
Advice: If you need to shrink a flex item, use .flex-shrink-1 on it.
Order
Use the .order classes to alter the flex item(s) in question’s visual order. Valid classes range from 0 to 12, with order 1 appearing before order 2 and so on. The lowest number gets the most importance.
Example
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>
Auto Margins
With .mr-auto (push things to the right) or .ml-auto (push items to the left), you can quickly add auto margins to flex elements:
Example
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>
Wrap
You can use .flex-nowrap (default),.flex-wrap, or .flex-wrap-reverse to control how flex objects wrap in a flex container.
To see the variations among the three classes, click on the buttons below to alter the way the flex elements are wrapped in the sample box:
==== Example MUKAVU ====
Example
<div class="d-flex flex-wrap">..</div>
<div class="d-flex flex-wrap-reverse">..</div>
<div class="d-flex flex-nowrap">..</div>
Align Content
Use the .align-content-* classes to adjust the gathered flex elements’ vertical alignment. .align-content-start (default), .align-content-end, .align-content-center, .align-content-between, .align-content-around, and .align-content-stretch are among the valid classes.
Note: Single rows of flex items are unaffected by these classes.
To observe the variations among the five classes, click on the buttons below to adjust the flex items’ vertical alignment in the sample box:
==== Example MUKAVU ====
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>
Align Items
The .align-items-* classes are used to control the vertical alignment of single rows of flex items. .align-items-start,.align-items-end,.align-items-center,.align-items-baseline, and.align-items-stretch (default) are valid classes.
To view the differences between the five classes, click the buttons below:
==== Example MUKAVU ====
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-baseline">..</div>
<div class="d-flex align-items-stretch">..</div>
Align Self
The .align-self-* classes are used to control the vertical alignment of a specified flex item. .align-self-start, .align-self-end, .align-self-center, .align-self-baseline, and .align-self-stretch (default) are considered valid classes.
To view the differences between the five classes, click the buttons below:
==== Example MUKAVU ====
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
It is simple to specify a certain flex class on a particular screen size because all flex classes have extra responsive classes.
The symbols sm, md, lg, or xl, which stand for small, medium, large, or xlarge screens, can be used in place of the * symbol.
| Class | Description | Example |
|---|---|---|
| Flex Container | ||
.d-*-flex | Creates a flexbox container for different screens | Try it |
.d-*-inline-flex | Creates an inline flexbox container for different screens | Try it |
| Direction | ||
.flex-*-row | Display flex items horizontally on different screens | Try it |
.flex-*-row-reverse | Display flex items horizontally, and right-aligned, on different screens | Try it |
.flex-*-column | Display flex items vertically on different screens | Try it |
.flex-*-column-reverse | Display flex items vertically, with reversed order, on different screens screens | Try it |
| Justified Content | ||
.justify-content-*-start | Display flex items from the start (left-aligned) on different screens | Try it |
.justify-content-*-end | Display flex items at the end (right-aligned) on different screens | Try it |
.justify-content-*-center | Display flex items in the center of a flex container on different screens | Try it |
.justify-content-*-between | Display flex items in “between” on different screens | Try it |
.justify-content-*-around | Display flex items “around” on different screens | Try it |
| Fill / Equal Width | ||
.flex-*-fill | Force flex items into equal widths on different screens | Try it |
| Grow | ||
.flex-*-grow-0 | Don’t make the items grow on different screens | |
.flex-*-grow-1 | Make items grow on different screens | |
| Shrink | ||
.flex-*-shrink-0 | Don’t make the items shrink on diferent screens | |
.flex-*-shrink-1 | Make items shrink on different screens | |
| Order | ||
.order-*-0-12 | Change the order from 0 to 12 on small screens | Try it |
| Wrap | ||
.flex-*-nowrap | Don’t wrap items on different screens | Try it |
.flex-*-wrap | Wrap items on different screens | Try it |
.flex-*-wrap-reverse | Reverse the wrapping of items on different screens | Try it |
| Align Content | ||
.align-content-*-start | Align gathered items from the start on different screens | Try it |
.align-content-*-end | Align gathered items at the end on different screens | Try it |
.align-content-*-center | Align gathered items in the center on different screens | Try it |
.align-content-*-around | Align gathered items “around” on different screens | Try it |
.align-content-*-stretch | Stretch gathered items on different screens | Try it |
| Align Items | ||
.align-items-*-start | Align single rows of items from the start on different screens | Try it |
.align-items-*-end | Align single rows of items at the end on different screens | Try it |
.align-items-*-center | Align single rows of items in the center on different screens | Try it |
.align-items-*-baseline | Align single rows of items on the baseline on different screens | Try it |
.align-items-*-stretch | Stretch single rows of items on different screens | Try it |
| Align Self | ||
.align-self-*-start | Align a flex item from the start on different screens | Try it |
.align-self-*-end | Align a flex item at the end on different screens | Try it |
.align-self-*-center | Align a flex item in the center on different screens | Try it |
.align-self-*-baseline | Align a flex item on the baseline on different screens | Try it |
.align-self-*-stretch | Stretch a flex item on different screens | Try it |
