Flex
Display Mode
d-{MODE} allows you to controls the display mode of elements. Where {MODE} is either
flex, or inline-flex.
Available Breakpoints:
s: <= 768pxm: >= 769pxl: >= 1280pxxl: >= 1920px
display: flex
d-flex display: inline-flex
d-inline-flex
d-flex display: inline-flex
d-inline-flex
Code
<span class="d-flex"></span>
<span class="d-inline-flex"></span>
Direction
flex-row
1
2
3
4
flex-row-reverse
1
2
3
4
flex-column
1
2
3
4
flex-column-reverse
1
2
3
4
flex-wrap
1
2
3
4
5
6
7
8
9
10
11
12
flex-nowrap
1
2
3
4
5
6
7
8
9
10
11
12
Code
Apply the class flex-{DIRECTION} where {DIRECTION} is row, row-reverse,
column or column-reverse.
Breakpoint prefixed classes available, using flex-{PREFIX}-{DIRECTION} where
{PREFIX} is s, m, l, xl
<span class="flex-row"></span>
<span class="flex-row-reverse"></span>
<span class="flex-column"></span>
<span class="flex-column-reverse"></span>
<span class="flex-wrap"></span>
<span class="flex-nowrap"></span>Justify Content, Align Items, Align Content
justify-content-start
1
2
3
4
justify-content-end
1
2
3
4
justify-content-center
1
2
3
4
justify-content-between
1
2
3
4
justify-content-around
1
2
3
4
justify-content-evenly
1
2
3
4
align-items-start
1
2
3
4
align-items-end
1
2
3
4
align-items-center
1
2
3
4
align-items-baseline
1
2
3
4
align-items-stretch
1
2
3
4
align-content-start
1
2
3
4
align-content-end
1
2
3
4
align-content-center
1
2
3
4
align-content-between
1
2
3
4
align-content-around
1
2
3
4
align-content-evenly
1
2
3
4
Code
Apply any of the classes above to an element with flexbox applied.
Breakpoint prefixed classes available, using justify-content-{PREFIX}-{DIRECTION}, align-items-{PREFIX}-{DIRECTION},
align-content-{PREFIX}-{DIRECTION} where {PREFIX} is s, m, l, xl
<span class="d-flex flex-row justify-content-around"></span>
<span class="d-flex flex-row justify-content-xl-end"></span>
<span class="d-flex flex-row align-content-evenly"></span>
<span class="d-flex flex-row align-content-s-between"></span>
<span class="d-flex flex-row align-items-start"></span>
<span class="d-flex flex-row align-items-m-stretch"></span>