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, xxl, and xxxl breakpoints.

Where alignment is one of:

  • align-items
  • justify-content

For align-items the value can be:

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

For justify-content the value can be:

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

👉 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 a 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.

.justify-content-flex-start
.justify-content-center
.justify-content-flex-end
.justify-content-space-between
.justify-content-space-between

Vertical (Cross-Axis) Alignment

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

.align-items-flex-start
.align-items-center
.align-items-flex-end
.align-items-baseline
.align-items-baseline

Responsive Box Alignment

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

.justify-content-sm-flex-start
.justify-content-md-center
.justify-content-lg-flex-end
.justify-content-xl-space-between
.justify-content-xl-space-between