Align Items

Utilities for controlling how flex and grid items are positioned along a container’s cross axis.

Contents

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

Class	Properties
`.align-items-start`	align-items: flex-start;
`.align-items-end`	align-items: flex-end;
`.align-items-center`	align-items: center;
`.align-items-baseline`	align-items: baseline;
`.align-items-stretch`	align-items: stretch;

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 ...">
  <div class="py-3">01</div>
  <div class="py-5">02</div>
  <div class="py-2">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 ...">
  <div class="py-3">01</div>
  <div class="py-5">02</div>
  <div class="py-4">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-3">01</div>
  <div class="py-5">02</div>
  <div class="py-4">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-3">01</div>
  <div class="py-5">02</div>
  <div class="py-4">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 ...">
  <div class="pt-2 pb-4">01</div>
  <div class="pt-4 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>