Edit page

Box Alignment

Responsive box-alignment helper classes allow aligning the content across both axes by setting the align-items and justify-content CSS properties.

Use the box-alignment classes on flex or grid containers, they will not work elsewhere.

👉 If you need to quickly create a flex container, there is the .d-flex helper class at your disposal.

📖 Read more about flexbox and grid layout concepts.

Naming System

The classes are named using the format [alignment]-[value] for xs and [alignment]-[breakpoint]-[value] for sm, md, lg, xl, x2l, and x3l breakpoints.

Where alignment is one of:

  • align-items
  • align-self
  • justify-content
  • justify-self

For align-items and align-self the value can be:

  • center
  • start
  • flex-start
  • end
  • flex-end
  • baseline
  • stretch

For justify-content the value can be:

  • center
  • start
  • flex-start
  • end
  • flex-end
  • space-between

For justify-self the value can be:

  • center
  • start
  • end
  • baseline
  • stretch

👉 The difference between start/flex-start and end/flex-end is that the prefixed variants are intended for flexbox while the versions without prefix only work inside grid layout.

📖 Read more about CSS Box Alignment concepts.

Horizontal (Main-Axis) Alignment (Justification)

There are 6 options of alignment on the main axis: start (flex-start for flexbox), center, end (flex-end for flexbox), and space-between.

Vertical (Cross-Axis) Alignment

There are 7 options of alignment on the cross axis: start (flex-start for flexbox), center, end (flex-end for flexbox), baseline, and stretch.

Responsive Box Alignment

From sm up you can set the desired box alignment for individual breakpoints.