Flexbox
Overview
Flexbox utilities for controlling how flex items are positioned, sized, and spaced.
Display Flex
Use the .d-flex class to create a flexbox container.
Flex item 1
Flex item 2
Flex item 3
Flex Direction
Control the direction of flex items with .flex-row and .flex-column classes.
.flex-row
Item 1
Item 2
Item 3
.flex-column
Item 1
Item 2
Item 3
Justify Content
Control how flex items are positioned along the main axis.
.justify-content-start
Item
Item
.justify-content-center
Item
Item
.justify-content-end
Item
Item
.justify-content-between
Item
Item
Align Items
Control how flex items are positioned along the cross axis.
.align-items-start
Item
Item
.align-items-center
Item
Item
.align-items-end
Item
Item
Flex Wrap
Control whether flex items wrap onto multiple lines.
.flex-wrap
Item 1
Item 2
Item 3
Item 4
Item 5
.flex-nowrap
Item 1
Item 2
Item 3
Item 4
Item 5
Flex Grow and Shrink
Control how flex items grow and shrink.
.flex-grow-1
Fixed width
Grows to fill available space
Fixed width
.flex-shrink-0
Won't shrink
Can shrink
Can shrink