Overview

Below is flexbox example markup. You could apply flexbox CSS properties manually, but things can get cumbersome when you are trying to apply responsive functionality. The benefit of using Bootstrap 4 flexbox utility classes is that you can set flexbox properties and target specific breakpoints.

  <div class="flex-container">
    <div class="flex-item-a">flex item with a class .flex-item-a</div>
    <div>flex item</div>
    <div>flex item</div>
  </div>

The table below compares vanilla CSS flexbox to Bootstrap 4 flexbox utility classes to help you decide which approach is best for your situation.

Flex container

  • Flex layout gives the container the ability to alter its items' width/height (and order) to best fill the available space of the container.
  • The container has a main axis and cross axis which depends on the flex direction. Each axis has a start and end. For example, if you set the flex direction to column. The main axis is vertical and the cross axis is horizontal. If you set the flex direction to row, the main axis is horizontal and the cross axis is vertical.

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
display: read docs
flex
makes the container act display block
inline-flex
makes the container act display inline
Bootstrap 4

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
flex-direction: read docs
row (default)
left to right
row-reverse
right to left
column
top to bottom
column
reverse = bottom to top
flexbox flex-direction main axis
Bootstrap 4

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
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 4

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
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 4

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
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 4

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
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 4

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.

CSS
flex-flow: read docs
< flex-direction > < flex-wrap >
example: flex-flow: column-reverse wrap-reverse; or just flex-flow: wrap-reverse;
Bootstrap 4

Since Bootstrap uses classes there is no shorthand property available


Flex Item

Do you want to override the parent settings and give a specific item their own unique settings? You will first need to write a custom class and add it to the item you would like to modify.

  • Flexbox items follow the orders given by their container.
  • By default, flex items all want to appear on the same line
  • Individual flexbox items can be targeted with a unique class and property to override the orders given by their container. The example below uses the class .flex-item-a to make adjustments to only flex-item-a .

Example:

HTML
  <div class="flex-container">
    <div class="flex-item-a">.flex-item-a</div>
    <div class="flex-item-b">.flex-item-b</div>
    <div class="flex-item-c">.flex-item-c</div>
  </div>
CSS
  .flex-item-a {
    order: 3;
    font-weight: bold;
  }
Result
flexbox order example

Step 1: Do you want to change the order of this item relative to the other items?

CSS
order: read docs
[number]
default is 0
Bootstrap 4

Use one or a combination of classes below to specify what breakpoints you would like the properties to be applied.

read docs
  • .order-1
  • .order-2
  • .order-3
  • .order-4
  • .order-5
  • .order-6
  • .order-7
  • .order-8
  • .order-9
  • .order-10
  • .order-11
  • .order-12
  • .order-sm-1
  • .order-sm-2
  • .order-sm-3
  • .order-sm-4
  • .order-sm-5
  • .order-sm-6
  • .order-sm-7
  • .order-sm-8
  • .order-sm-9
  • .order-sm-10
  • .order-sm-11
  • .order-sm-12
  • .order-md-1
  • .order-md-2
  • .order-md-3
  • .order-md-4
  • .order-md-5
  • .order-md-6
  • .order-md-7
  • .order-md-8
  • .order-md-9
  • .order-md-10
  • .order-md-11
  • .order-md-12
  • .order-lg-1
  • .order-lg-2
  • .order-lg-3
  • .order-lg-4
  • .order-lg-5
  • .order-lg-6
  • .order-lg-7
  • .order-lg-8
  • .order-lg-9
  • .order-lg-10
  • .order-lg-11
  • .order-lg-12
  • .order-xl-1
  • .order-xl-2
  • .order-xl-3
  • .order-xl-4
  • .order-xl-5
  • .order-xl-6
  • .order-xl-7
  • .order-xl-8
  • .order-xl-9
  • .order-xl-10
  • .order-xl-11
  • .order-xl-12

Step 2: Do you want to have this item take up more space than the other items?

CSS
flex-grow: read docs
[number]
default 0
Bootstrap 4
No classes available

Step 3: Do you want this item to take less space than the other items?

CSS
flex-shrink: read docs
[number]
default 1
Bootstrap 4
No classes available

Step 4: Do you want to set the default size of this item before the other item sizes are set?

CSS
flex-basis: read docs
[length]
A number followed by px, em, rem, or %. Check the docs for additional keywords
auto (default)
look at my width or height property
Bootstrap 4
No classes available

Step 5: Do you want to override the align-items value for this item?

CSS
align-self: read docs
auto
flex-start
cross-start margin is on the cross start line
flex-end
cross-end margin is on the cross end line
center
centers are aligned
baseline
baselines are aligned
stretch (default)
fill the container
Bootstrap 4

Use one or a combination of classes below to specify what breakpoints you would like the properties to be applied.

read docs
  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch
  • .align-self-sm-start
  • .align-self-sm-end
  • .align-self-sm-center
  • .align-self-sm-baseline
  • .align-self-sm-stretch
  • .align-self-md-start
  • .align-self-md-end
  • .align-self-md-center
  • .align-self-md-baseline
  • .align-self-md-stretch
  • .align-self-lg-start
  • .align-self-lg-end
  • .align-self-lg-center
  • .align-self-lg-baseline
  • .align-self-lg-stretch
  • .align-self-xl-start
  • .align-self-xl-end
  • .align-self-xl-center
  • .align-self-xl-baseline
  • .align-self-xl-stretch

Shorthand property

This is the shorthand for flex-grow, flex-shrink and flex-basis combined.

CSS
flex: read docs
example:
Three values: flex-grow | flex-shrink | flex-basis flex: 2 2 10%;
Bootstrap 4
Since Bootstrap uses classes there is no shorthand property available

Want to Save Time Using Bootstrap 4?

Get templates, project code samples, videos, and reference guides to help you get started quickly.

Learn More