Flexbox

Bootstrap uses flexbox for layout, so in addition to it's own grid system there are many classes you can use to create your page designs

Responsive

• d{-BR}{-inline}-flex
  • BR:
    sm md lg xl xxl

Try it

The main class is d-flex, but there are responsive options.

There's also an option to use the inline version of the display property. In that case the container will behave as an inline element.

Direction

• flex{-BR}{-TYP}{-reverse}
  • BR:
    sm md lg xl xxl
  • TYP:
    row column

Try it

The main class is d-flex, but there are responsive variants.

row rows makes the direction change from vertical to horizontal

column

reverse

Justify Content

• justify-content{-BR}-{TYP}
  • BR:
    sm md lg xl xxl
  • TYP:
    start end center between around evenly

Try it

Justify content aligns the content horizontally. You can specify breakpoints and then one of six different types.

start- Aligns the elements at the beginning

end- Aligns the elements at the end

center- Centers the elements horizontally

between- puts space inside the elements to fit in the container

around- puts the same space around each elements to fit in the container

evenly- same as around, but makes the space in between elements be the same.

Vertical Alignment

• align-items{-BR}-{TYP}
  • BR:
    sm md lg xl xxl
  • TYP:
    start end center baseline stretch

Try it

Align items takes care of things vertically.

align-items-start - aligns the elements to the top

align-items-end - aligns them to the bottom

align-items-center -centers them vertically

align-items-baseline - aligns the elements to their baseline. If the elements are the same size, it looks just like align-items-start

align-items-stretch - stretches them to fit the space vertically.