Align Content

Use align-content utilities on flexbox containers to align flex items together on the cross axis. Choose from start (browser default), end, center, between, around, or stretch.

Quick reference

Basic usage

Start

Use align-content-start to pack rows in a container against the start of the cross axis:

<div class="grid gap-4 align-content-start" style="--bs-columns: 3;">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

Center

Use align-content-center to pack rows in a container in the center of the cross axis:

<div class="grid gap-4 align-content-center" style="--bs-columns: 3;">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

End

Use align-content-end to pack rows in a container against the end of the cross axis:

<div class="grid gap-4 align-content-end" style="--bs-columns: 3;">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

Space between

Use align-content-between to distribute rows in a container such that there is an equal amount of space between each line:

<div class="grid gap-4 align-content-between" style="--bs-columns: 3;">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

Space around

Use align-content-around to distribute rows in a container such that there is an equal amount of space around each line:

<div class="grid gap-4 align-content-around" style="--bs-columns: 3;">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

Stretch

Use align-content-stretch to stretch items to fill the container’s cross axis.

<div class="grid gap-4 align-content-stretch" style="--bs-columns: 3;">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

Breakpoints

All align-content utilities that supports responsive at specific breakpoints, from xs to xxl, have no breakpoint abbreviation in them.

The responsive classes are named using the format align-content-{breakpoint}-{value}.

• .align-content-sm-start
• .align-content-sm-end
• .align-content-sm-center
• .align-content-sm-between
• .align-content-sm-around
• .align-content-sm-stretch
• .align-content-md-start
• .align-content-md-end
• .align-content-md-center
• .align-content-md-between
• .align-content-md-around
• .align-content-md-stretch
• .align-content-lg-start
• .align-content-lg-end
• .align-content-lg-center
• .align-content-lg-between
• .align-content-lg-around
• .align-content-lg-stretch
• .align-content-xl-start
• .align-content-xl-end
• .align-content-xl-center
• .align-content-xl-between
• .align-content-xl-around
• .align-content-xl-stretch
• .align-content-xxl-start
• .align-content-xxl-end
• .align-content-xxl-center
• .align-content-xxl-between
• .align-content-xxl-around
• .align-content-xxl-stretch

For example, use align-content-md-around to apply the align-content-around utility at only medium screen sizes and above.

<div class="d-flex align-content-start align-content-md-around">
  <!-- ... -->
</div>