Flex

Display Flex

Use these utility classes to make elements become flex containers.

ClassValueCopy

1. .d-flex
   display: flex
   class="d-flex"Copy to Clipboard
2. .d-inline-flex
   display: inline-flex
   class="d-inline-flex"Copy to Clipboard

Breakpoint infixes

Add the viewport sizing infixes (sm, md, lg, xl, xxl) to apply at breakpoints.

Note: these infixes apply to all Flex utilities, for example align-items-xl-end.

	XS	Small	Medium	Large	XL	XXL	Copy
.d-flex	Flexes	Flexes	Flexes	Flexes	Flexes	Flexes	class="d-flex"Copy to Clipboard
.d-sm-flex	Doesn’t Flex	Flexes	Flexes	Flexes	Flexes	Flexes	class="d-sm-flex"Copy to Clipboard
.d-md-flex	Doesn’t Flex	Doesn’t Flex	Flexes	Flexes	Flexes	Flexes	class="d-md-flex"Copy to Clipboard
.d-lg-flex	Doesn’t Flex	Doesn’t Flex	Doesn’t Flex	Flexes	Flexes	Flexes	class="d-lg-flex"Copy to Clipboard
.d-xl-flex	Doesn’t Flex	Doesn’t Flex	Doesn’t Flex	Doesn’t Flex	Flexes	Flexes	class="d-xl-flex"Copy to Clipboard
.d-xxl-flex	Doesn’t Flex	Doesn’t Flex	Doesn’t Flex	Doesn’t Flex	Doesn’t Flex	Flexes	class="d-xxl-flex"Copy to Clipboard

Align-items

ClassValueCopy

1. .align-items-stretch
   align-items: stretch
   align-items-stretchCopy to Clipboard
2. .align-items-start
   align-items: start
   align-items-startCopy to Clipboard
3. .align-items-end
   align-items: end
   align-items-endCopy to Clipboard
4. .align-items-center
   align-items: center
   align-items-centerCopy to Clipboard
5. .align-items-baseline
   align-items: baseline
   align-items-baselineCopy to Clipboard

Visual examples

.align-items-stretch

Item 1

Item 2

Item 3

Item 4

.align-items-start

Item 1

Item 2

Item 3

Item 4

.align-items-end

Item 1

Item 2

Item 3

Item 4

.align-items-center

Item 1

Item 2

Item 3

Item 4

.align-items-baseline

Item 1

Item 2

Item 3

Item 4

Align-self

Apply on flex items (as opposed to .align-items which is applied to flex containers).

ClassValueCopy

1. .align-self-stretch
   align-self: stretch
   align-self-stretchCopy to Clipboard
2. .align-self-start
   align-self: start
   align-self-startCopy to Clipboard
3. .align-self-end
   align-self: end
   align-self-endCopy to Clipboard
4. .align-self-center
   align-self: center
   align-self-centerCopy to Clipboard
5. .align-self-baseline
   align-self: baseline
   align-self-baselineCopy to Clipboard

Justify-content

ClassValueCopy

1. .justify-content-start
   justify-content: start
   justify-content-startCopy to Clipboard
2. .justify-content-end
   justify-content: end
   justify-content-endCopy to Clipboard
3. .justify-content-center
   justify-content: center
   justify-content-centerCopy to Clipboard
4. .justify-content-between
   justify-content: between
   justify-content-betweenCopy to Clipboard
5. .justify-content-around
   justify-content: around
   justify-content-aroundCopy to Clipboard
6. .justify-content-evenly
   justify-evenly: between
   justify-content-evenlyCopy to Clipboard

Visual examples

.justify-content-start

Item 1

Item 2

Item 3

Item 4

.justify-content-end

Item 1

Item 2

Item 3

Item 4

.justify-content-center

Item 1

Item 2

Item 3

Item 4

.justify-content-between

Item 1

Item 2

Item 3

Item 4

.justify-content-around

Item 1

Item 2

Item 3

Item 4

.justify-content-evenly

Item 1

Item 2

Item 3

Item 4

Flex-direction

ClassValueCopy

1. .flex-row
   flex-direction: row
   flex-direction-rowCopy to Clipboard
2. .flex-column
   flex-direction: column
   flex-direction-columnCopy to Clipboard
3. .flex-row-reverse
   flex-direction: row-reverse
   flex-direction-row-reverseCopy to Clipboard
4. .flex-column-reverse
   flex-direction: column-reverse
   flex-direction-column-reverseCopy to Clipboard

Visual examples

.flex-row

Item 1

Item 2

Item 3

Item 4

The default is flex-direction: row which is “left to right” along X axis. This is the default and you do need to declare this (unless you do). The following classes allow permutations:

.flex-column

Item 1

Item 2

Item 3

Item 4

Changes the main axis to Y (from the default X asis) i.e. “top to bottom”.

.flex-row-reverse

Item 1

Item 2

Item 3

Item 4

Reverses the X axis to “right to left”.

.flex-column-reverse

Item 1

Item 2

Item 3

Item 4

Reverses the Y axis to “bottom to top”.

Other flex utility classes

Order

Apply on flex items (as opposed to .flex-row-reverse which is applied to flex containers).

ClassValueCopy

1. .order-first
   order: -1
   order-1Copy to Clipboard
2. .order-1
   order: 1
   order-1Copy to Clipboard
3. .order-2
   order: 2
   order-2Copy to Clipboard
4. .order-3
   order: 3
   order-3Copy to Clipboard
5. .order-4
   order: 4
   order-4Copy to Clipboard
6. .order-5
   order: 5
   order-5Copy to Clipboard
7. .order-last
   order: 6
   order-lastCopy to Clipboard

Grow and shrink

ClassValueCopy

1. .flex-grow-0
   flex-grow: 0
   flex-grow-0Copy to Clipboard
2. .flex-grow-1
   flex-grow: 1
   flex-grow-1Copy to Clipboard
3. .flex-shrink-0
   flex-shrink: 0
   flex-shrink-0Copy to Clipboard
4. .flex-shrink-1
   flex-shrink: 1
   flex-shrink-1Copy to Clipboard

Wrap

ClassValueCopy

1. .flex-wrap
   flex-wrap: wrap
   flex-wrapCopy to Clipboard
2. .flex-nowrap
   flex-wrap: nowrap
   flex-nowrapCopy to Clipboard
3. .flex-wrap-reverse
   flex-wrap: reverse
   flex-wrap-reverseCopy to Clipboard