Step 1: Do you want the container to behave like a block or inline element? The containers can act like block or inline elements. If you change this to inline-flex they will nudge up together like a list of images would.

CSS Flexbox display: read docs flex makes the container act display block inline-flex makes the container act display inline Bootstrap Flex Classes Use one or a combination of classes below to specify what breakpoints you would like the properties to be applied. read docs .d-flex

.d-inline-flex

.d-sm-flex

.d-sm-inline-flex

.d-md-flex

.d-md-inline-flex

.d-lg-flex

.d-lg-inline-flex

.d-xl-flex

.d-xl-inline-flex

Step 2: Do you want your main axis to be vertical or horizontal?

CSS Flexbox flex-direction: read docs row (default) left to right row-reverse right to left column top to bottom column reverse = bottom to top Bootstrap Flex Classes Use one or a combination of classes below to specify what breakpoints you would like the properties to be applied. read docs .flex-row

.flex-row-reverse

.flex-column

.flex-column-reverse

.flex-sm-row

.flex-sm-row-reverse

.flex-sm-column

.flex-sm-column-reverse

.flex-md-row

.flex-md-row-reverse

.flex-md-column

.flex-md-column-reverse

.flex-lg-row

.flex-lg-row-reverse

.flex-lg-column

.flex-lg-column-reverse

.flex-xl-row

.flex-xl-row-reverse

.flex-xl-column

.flex-xl-column-reverse

Step 3: How do you want the extra space to be distributed along the main axis?

CSS Flexbox justify-content: read docs flex-start (default) items anchored to the start flex-end items anchored to the start center items centered space-between items evenly distributed in the line. First item in on the start and last item is at the end space-around start and end items are not to the edge but have 1 unit of space on each side space-evenly similar to space-around, except all space is the same Bootstrap Flex Classes Use one or a combination of classes below to specify what breakpoints you would like the properties to be applied. read docs .justify-content-start

.justify-content-end

.justify-content-center

.justify-content-between

.justify-content-around

.justify-content-sm-start

.justify-content-sm-end

.justify-content-sm-center

.justify-content-sm-between

.justify-content-sm-around

.justify-content-md-start

.justify-content-md-end

.justify-content-md-center

.justify-content-md-between

.justify-content-md-around

.justify-content-lg-start

.justify-content-lg-end

.justify-content-lg-center

.justify-content-lg-between

.justify-content-lg-around

.justify-content-xl-start

.justify-content-xl-end

.justify-content-xl-center

.justify-content-xl-between

.justify-content-xl-around

Step 4: How do you want the extra space of LINES of items to be distributed along the cross axis?

CSS Flexbox align-content: read docs flex-start items anchored to the start flex-end items anchored to the end center items centered space-between first line at the start of the container and the last one is at the end space-around lines are evenly distributed with equal space around each line stretch (default) lines stretch to take up the space that is left Bootstrap Flex Classes Use one or a combination of classes below to specify what breakpoints you would like the properties to be applied. read docs .align-content-start

.align-content-end

.align-content-center

.align-content-around

.align-content-stretch

.align-content-sm-start

.align-content-sm-end

.align-content-sm-center

.align-content-sm-around

.align-content-sm-stretch

.align-content-md-start

.align-content-md-end

.align-content-md-center

.align-content-md-around

.align-content-md-stretch

.align-content-lg-start

.align-content-lg-end

.align-content-lg-center

.align-content-lg-around

.align-content-lg-stretch

.align-content-xl-start

.align-content-xl-end

.align-content-xl-center

.align-content-xl-around

.align-content-xl-stretch

Step 5: How do you want the extra space between items to be distributed along the cross axis?

CSS Flexbox align-items: read docs flex-start cross axis align items to start flex-end cross axis align items to end center cross axis align items center baseline align baselines stretch (default) stretch to fill the container Bootstrap Flex Classes Use one or a combination of classes below to specify what breakpoints you would like the properties to be applied. read docs .align-items-start

.align-items-end

.align-items-center

.align-items-baseline

.align-items-stretch

.align-items-sm-start

.align-items-sm-end

.align-items-sm-center

.align-items-sm-baseline

.align-items-sm-stretch

.align-items-md-start

.align-items-md-end

.align-items-md-center

.align-items-md-baseline

.align-items-md-stretch

.align-items-lg-start

.align-items-lg-end

.align-items-lg-center

.align-items-lg-baseline

.align-items-lg-stretch

.align-items-xl-start

.align-items-xl-end

.align-items-xl-center

.align-items-xl-baseline

.align-items-xl-stretch

Step 6: Do you want the items to wrap if they don't fit on one line? By default, flex items will try to fit all the items onto one line.

CSS Flexbox flex-wrap: read docs nowrap (default) all items will try to stay on one line wrap if items don't fit they will wrap and create a new line below wrap-reverse if items don't fit they will wrap and create a new line above Bootstrap Flex Classes Use one or a combination of classes below to specify what breakpoints you would like the properties to be applied. read docs .flex-nowrap

.flex-wrap

.flex-wrap-reverse

.flex-sm-nowrap

.flex-sm-wrap

.flex-sm-wrap-reverse

.flex-md-nowrap

.flex-md-wrap

.flex-md-wrap-reverse

.flex-lg-nowrap

.flex-lg-wrap

.flex-lg-wrap-reverse

.flex-xl-nowrap

.flex-xl-wrap

.flex-xl-wrap-reverse

Shorthand property This is a shorthand property that sets the flex-direction and flex-wrap properties. I suggest avoid using this until you learn the core properties because it could make things more confusing.