Bootstrap 4 Flex
Bootstrap 4 Flex
Use flex classes to control the layout of Bootstrap 4 components.
Flexbox
The biggest difference between Bootstrap 3 and Bootstrap 4 is that Bootstrap 4 now uses flexbox, instead of floats, to handle the layout.
The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning. If you are new to flex, you can read about it in our CSS Flexbox Tutorial.
Flexbox is not supported in IE9 and earlier versions.
If you require IE8-9 support, use Bootstrap 3. It is the most stable version of Bootstrap, and it is still supported by the team for critical bugfixes and documentation changes. However, no new features will be added to it.
To create a flexbox container and to transform direct children into flex items, use the d-flex class:
Example
Flexbox container
Example
<div class="d-flex p-3 bg-secondary text-white">Flexbox container</div>
Try it Yourself »To create an inline flexbox container, use the d-inline-flex class:
Example
Inline flexbox container
Example
<div class="d-inline-flex p-3 bg-secondary text-white">Flexbox container</div>
Try it Yourself »Horizontal Direction
Use .flex-row to display the flex items
horizontally (side by side). This is default.
Tip: Use .flex-row-reverse
to right-align the horizontal direction:
Example
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
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>
Try it Yourself »Vertical Direction
Use .flex-column to display the flex items vertically (on top of each other), or .flex-column-reverse
to reverse the vertical direction:
Example
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
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>
Try it Yourself »Justify Content
Use the .justify-content-* classes to change the alignment of flex items. Valid classes are start (default), end, center, between or around:
Example
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
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>
Try it Yourself »Fill / Equal Widths
Use .flex-fill on flex items to force them into equal widths:
Example
Flex item 1
Flex item 2
Flex item 3
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>
Try it Yourself »Grow
Use .flex-grow-1 on a flex item to take up the rest of the space. In the example below, the first two flex items take up their necessary space, while the last item takes up the rest of the available space:
Example
Flex item 1
Flex item 2
Flex item 3
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>
Try it Yourself »Tip: Use .flex-shrink-1 on a flex item to make it shrink if necessary.
Order
Change the visual order of a specific flex item(s) with the .order classes. Valid classes are from 0 to 12, where the lowest number has highest priority (order-1 is shown before order-2, etc..):
Example
Flex item 1
Flex item 2
Flex item 3
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>
Try it Yourself »Auto Margins
Easily add auto margins to flex items with .mr-auto (push items to the right), or by using .ml-auto (push items to the left):
Example
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
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>
Try it Yourself »Wrap
Control how flex items wrap in a flex container with .flex-nowrap (default), .flex-wrap or .flex-wrap-reverse.
Click on the buttons below to see the difference between the three classes, by changin the wrapping of the flex items in the example box:
Example
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
Flex item 14
Flex item 15
Flex item 16
Flex item 17
Flex item 18
Flex item 19
Flex item 20
Flex item 21
Flex item 22
Flex item 23
Flex item 24
Flex item 25
Example
<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
Control the vertical alignment of gathered flex items with the .align-content-*
classes. Valid classes are .align-content-start (default), .align-content-end, .align-content-center, .align-content-between, .align-content-around and .align-content-stretch.
Note: These classes have no effect on single rows of flex items.
Example
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>
Try it Yourself »Align Items
Control the vertical alignment of single rows of flex items with the .align-items-*
classes. Valid classes are .align-items-start, .align-items-end, .align-items-center, .align-items-baseline, and .align-items-stretch
(default).
Click on the buttons below to see the difference between the five classes:
Example
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>
Try it Yourself »Align Self
Control the vertical alignment of a specified flex item with the .align-self-*
classes. Valid classes are .align-self-start, .align-self-end, .align-self-center, .align-self-baseline, and .align-self-stretch
(default).
Click on the buttons below to see the difference between the five classes:
Example
Flex item 1
Flex item 2
Flex item 3
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>
Try it Yourself »Responsive Flex Classes
All flex classes comes with additional responsive classes, which makes it easy to set a specific flex class on a specific screen size:
| Class | Description | |
|---|---|---|
| Flex Container | ||
.d-sm-flex |
Creates a flexbox container for small screens | |
.d-sm-inline-flex |
Creates an inline flexbox container for small screens | |
.d-md-flex |
Creates a flexbox container for medium screens | |
.d-md-inline-flex |
Creates an inline flexbox container for medium screens | |
.d-lg-flex |
Creates a flexbox container for large screens | |
.d-lg-inline-flex |
Creates an inline flexbox container for large screens | |
.d-xl-flex |
Creates a flexbox container for xlarge screens | |
.d-xl-inline-flex |
Creates an inline flexbox container for xlarge screens | |
| Direction | ||
.flex-sm-row |
Display flex items horizontally on small screens | |
.flex-sm-row-reverse |
Display flex items horizontally, and right-aligned, on medium screens | |
.flex-md-row |
Display flex items horizontally on small screens | |
.flex-md-row-reverse |
Display flex items horizontally, and right-aligned, on medium screens | |
.flex-sm-row |
Display flex items horizontally on large screens | |
.flex-sm-row-reverse |
Display flex items horizontally, and right-aligned, on large screens | |
.flex-sm-row |
Display flex items horizontally on xlarge screens | |
.flex-sm-row-reverse |
Display flex items horizontally, and right-aligned, on xlarge screens | |
.flex-sm-column |
Display flex items vertically on small screens | |
.flex-sm-column-reverse |
Display flex items vertically, with reversed order, on small screens | |
.flex-md-column |
Display flex items vertically on medium screens | |
.flex-md-column-reverse |
Display flex items vertically, with reversed order, on medium screens | |
.flex-lg-column |
Display flex items vertically on large screens | |
.flex-lg-column-reverse |
Display flex items vertically, with reversed order, on large screens | |
.flex-xl-column |
Display flex items vertically on xlarge screens | |
.flex-xl-column-reverse |
Display flex items vertically, with reversed order, on xlarge screens | |
| Justified Content | ||
.justify-content-sm-start |
Display flex items from the start (left-aligned) on small screens | |
.justify-content-md-start |
Display flex items from the start (left-aligned) on medium screens | |
.justify-content-lg-start |
Display flex items from the start (left-aligned) on large screens | |
.justify-content-xl-start |
Display flex items from the start (left-aligned) on xlarge screens | |
.justify-content-sm-end |
Display flex items at the end (right-aligned) on small screens | |
.justify-content-md-end |
Display flex items at the end (right-aligned) on medium screens | |
.justify-content-lg-end |
Display flex items at the end (right-aligned) on large screens | |
.justify-content-xl-end |
Display flex items at the end (right-aligned) on xlarge screens | |
.justify-content-sm-center |
Display flex items in the center of a flex container on small screens | |
.justify-content-md-center |
Display flex items in the center of a flex container on medium screens | |
.justify-content-lg-center |
Display flex items in the center of a flex container on large screens | |
.justify-content-xl-center |
Display flex items in the center of a flex container on xlarge screens | |
.justify-content-sm-between |
Display flex items in "between" on small screens | |
.justify-content-md-between |
Display flex items in "between" on medium screens | |
.justify-content-lg-between |
Display flex items in "between" on large screens | |
.justify-content-xl-between |
Display flex items in "between" on xlarge screens | |
.justify-content-sm-around |
Display flex items "around" on small screens | |
.justify-content-md-around |
Display flex items "around" on medium screens | |
.justify-content-lg-around |
Display flex items "around" on large screens | |
.justify-content-xl-around |
Display flex items "around" on xlarge screens | |
| Fill / Equal Width | ||
.flex-sm-fill |
Force flex items into equal widths on small screens | |
.flex-md-fill |
Force flex items into equal widths on medium screens | |
.flex-lg-fill |
Force flex items into equal widths on large screens | |
.flex-xl-fill |
Force flex items into equal widths on xlarge screens | |
| Fill / Equal Width | ||
.flex-sm-fill |
Force flex items into equal widths on small screens | |
.flex-md-fill |
Force flex items into equal widths on medium screens | |
.flex-lg-fill |
Force flex items into equal widths on large screens | |
.flex-xl-fill |
Force flex items into equal widths on xlarge screens | |
| Grow | ||
.flex-sm-grow-0 |
Don't make the items grow on small screens | |
.flex-sm-grow-1 |
Make items grow on small screens | |
.flex-md-grow-0 |
Don't make the items grow on medium screens | |
.flex-md-grow-1 |
Make items grow on medium screens | |
.flex-lg-grow-0 |
Don't make the items grow on large screens | |
.flex-lg-grow-1 |
Make items grow on large screens | |
.flex-xl-grow-0 |
Don't make the items grow on xlarge screens | |
.flex-xl-grow-1 |
Make items grow on xlarge screens | |
| Shrink | ||
.flex-sm-shrink-0 |
Don't make the items shrink on small screens | |
.flex-sm-shrink-1 |
Make items shrink on small screens | |
.flex-md-shrink-0 |
Don't make the items shrink on medium screens | |
.flex-md-shrink-1 |
Make items shrink on medium screens | |
.flex-lg-shrink-0 |
Don't make the items shrink on large screens | |
.flex-lg-shrink-1 |
Make items shrink on large screens | |
.flex-xl-shrink-0 |
Don't make the items shrink on xlarge screens | |
.flex-xl-shrink-1 |
Make items shrink on xlarge screens | |
| Order | ||
.order-sm-0-12 |
Change the order from 0 to 12 on small screens | |
.order-md-0-12 |
Change the order from 0 to 12 on medium screens | |
.order-lg-0-12 |
Change the order from 0 to 12 on large screens | |
.order-xl-0-12 |
Change the order from 0 to 12 on xlarge screens | |
| Wrap | ||
.flex-sm-nowrap |
Don't wrap items on small screens | |
.flex-sm-wrap |
Wrap items on small screens | |
.flex-sm-wrap-reverse |
Reverse the wrapping of items on small screens | |
.flex-md-nowrap |
Don't wrap items on medium screens | |
.flex-md-wrap |
Wrap items on medium screens | |
.flex-md-wrap-reverse |
Reverse the wrapping of items on medium screens | |
.flex-lg-nowrap |
Don't wrap items on large screens | |
.flex-lg-wrap |
Wrap items on large screens | |
.flex-lg-wrap-reverse |
Reverse the wrapping of items on large screens | |
.flex-lg-nowrap |
Don't wrap items on small screens | |
.flex-lg-wrap |
Wrap items on large screens | |
.flex-lg-wrap-reverse |
Reverse the wrapping of items on large screens | |
| Align Content | ||
.align-content-sm-start |
Align gathered items from the start on small screens | |
.align-content-md-start |
Align gathered items from the start on medium screens | |
.align-content-lg-start |
Align gathered items from the start on large screens | |
.align-content-xl-start |
Align gathered items from the start on xlarge screens | |
.align-content-sm-end |
Align gathered items at the end on small screens | |
.align-content-md-end |
Align gathered items at the end on medium screens | |
.align-content-lg-end |
Align gathered items at the end on large screens | |
.align-content-xl-end |
Align gathered items at the end on xlarge screens | |
.align-content-sm-center |
Align gathered items in the center on small screens | |
.align-content-md-center |
Align gathered items in the center on medium screens | |
.align-content-lg-center |
Align gathered items in the center on large screens | |
.align-content-xl-center |
Align gathered items in the center on xlarge screens | |
.align-content-sm-around |
Align gathered items "around" on small screens | |
.align-content-md-around |
Align gathered items "around" on medium screens | |
.align-content-lg-around |
Align gathered items "around" on large screens | |
.align-content-xl-center |
Align gathered items "around" on xlarge screens | |
.align-content-sm-stretch |
Stretch gathered items on small screens | |
.align-content-md-stretch |
Stretch gathered items on medium screens | |
.align-content-lg-stretch |
Stretch gathered items on large screens | |
.align-content-xl-stretch |
Stretch gathered items on xlarge screens | |
| Align Items | ||
.align-items-sm-start |
Align single rows of items from the start on small screens | |
.align-items-md-start |
Align single rows of items from the start on medium screens | |
.align-items-lg-start |
Align single rows of items from the start on large screens | |
.align-items-xl-start |
Align single rows of items from the start on xlarge screens | |
.align-items-sm-end |
Align single rows of items at the end on small screens | |
.align-items-md-end |
Align single rows of items at the end on medium screens | |
.align-items-lg-end |
Align single rows of items at the end on large screens | |
.align-items-xl-end |
Align single rows of items at the end on xlarge screens | |
.align-items-sm-center |
Align single rows of items in the center on small screens | |
.align-items-md-center |
Align single rows of items in the center on medium screens | |
.align-items-lg-center |
Align single rows of items in the center on large screens | |
.align-items-xl-center |
Align single rows of items in the center on xlarge screens | |
.align-items-sm-baseline |
Align single rows of items on the baseline on small screens | |
.align-items-md-baseline |
Align single rows of items on the baseline on medium screens | |
.align-items-lg-baseline |
Align single rows of items on the baseline on large screens | |
.align-items-xl-baseline |
Align single rows of items on the baseline on xlarge screens | |
.align-items-sm-stretch |
Stretch single rows of items on small screens | |
.align-items-md-stretch |
Stretch single rows of items on medium screens | |
.align-items-lg-stretch |
Stretch single rows of items on large screens | |
.align-items-xl-stretch |
Stretch single rows of items on xlarge screens | |
| Align Self | ||
.align-self-sm-start |
Align a flex item from the start on small screens | |
.align-self-md-start |
Align a flex item from the start on medium screens | |
.align-self-lg-start |
Align a flex item from the start on large screens | |
.align-self-xl-start |
Align a flex item from the start on xlarge screens | |
.align-self-sm-end |
Align a flex item at the end on small screens | |
.align-self-md-end |
Align a flex item at the end on medium screens | |
.align-self-lg-end |
Align a flex item at the end on large screens | |
.align-self-xl-end |
Align a flex item at the end on xlarge screens | |
.align-self-sm-center |
Align a flex item in the center on small screens | |
.align-self-md-center |
Align a flex item in the center on medium screens | |
.align-self-lg-center |
Align a flex item in the center on large screens | |
.align-self-xl-center |
Align a flex item in the center on xlarge screens | |
.align-self-sm-baseline |
Align a flex item on the baseline on small screens | |
.align-self-md-baseline |
Align a flex item on the baseline on medium screens | |
.align-self-lg-baseline |
Align a flex item items on the baseline on large screens | |
.align-self-xl-baseline |
Align a flex item on the baseline on xlarge screens | |
.align-self-sm-stretch |
Stretch a flex item on small screens | |
.align-self-md-stretch |
Stretch a flex item on medium screens | |
.align-self-lg-stretch |
Stretch a flex item on large screens | |
.align-self-xl-stretch |
Stretch a flex item on xlarge screens |
