Flexbox

go.raybo.org/4AJ2

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

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

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

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

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.

Flexbox go.raybo.org/4AJ2 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