Align Items

Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from start, end, center, baseline, or stretch (browser default).

Quick reference

Basic usage

Stretch

Use align-items-stretch to stretch items to fill the container’s cross axis. This is the browser default behavior.

<div class="d-flex align-items-stretch gap-4">
  <div class="py-2">01</div>
  <div class="py-6">02</div>
  <div class="py-5">03</div>
</div>

Start

Use align-items-start to align items to the start of the container’s cross axis:

<div class="d-flex align-items-start gap-4">
  <div class="py-2">01</div>
  <div class="py-6">02</div>
  <div class="py-5">03</div>
</div>

Center

Use align-items-center to align items along the center of the container’s cross axis:

<div class="d-flex align-items-center ...">
  <div class="py-2">01</div>
  <div class="py-6">02</div>
  <div class="py-5">03</div>
</div>

End

Use align-items-end to align items to the end of the container’s cross axis:

<div class="d-flex align-items-end ...">
  <div class="py-2">01</div>
  <div class="py-6">02</div>
  <div class="py-5">03</div>
</div>

Baseline

Use align-items-baseline to align items along the container’s cross axis such that all of their baselines align:

<div class="d-flex align-items-baseline gap-4">
  <div class="pt-2 pb-4">01</div>
  <div class="pt-6 pb-5">02</div>
  <div class="pt-5 pb-3">03</div>
</div>

Breakpoints

All align-items 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-items-{breakpoint}-{value}.

• .align-items-sm-start
• .align-items-sm-end
• .align-items-sm-center
• .align-items-sm-baseline
• .align-items-sm-stretch
• .align-items-md-start
• .align-items-md-end
• .align-items-md-center
• .align-items-md-baseline
• .align-items-md-stretch
• .align-items-lg-start
• .align-items-lg-end
• .align-items-lg-center
• .align-items-lg-baseline
• .align-items-lg-stretch
• .align-items-xl-start
• .align-items-xl-end
• .align-items-xl-center
• .align-items-xl-baseline
• .align-items-xl-stretch
• .align-items-xxl-start
• .align-items-xxl-end
• .align-items-xxl-center
• .align-items-xxl-baseline
• .align-items-xxl-stretch

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

<div class="d-flex align-items-stretch align-items-md-center">
  <!-- ... -->
</div>