Align Self

Utilities for controlling how an individual flex or grid item is positioned along its container’s cross axis.

Contents

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

Quick reference

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

Basic usage

Auto

Use align-self-auto to align an item based on the value of the container’s align-items property:

<div class="d-flex align-items-stretch ...">
  <div>01</div>
  <div class="align-self-auto ...">02</div>
  <div>03</div>
</div>

Start

Use align-self-start to align an item to the start of the container’s cross axis, despite the container’s align-items value:

<div class="d-flex align-items-stretch ...">
  <div>01</div>
  <div class="align-self-start ...">02</div>
  <div>03</div>
</div>

Center

Use align-self-center to align an item along the center of the container’s cross axis, despite the container’s align-items value:

<div class="d-flex align-items-stretch ...">
  <div>01</div>
  <div class="align-self-center ...">02</div>
  <div>03</div>
</div>

End

Use align-self-end to align an item to the end of the container’s cross axis, despite the container’s align-items value:

<div class="d-flex align-items-stretch ...">
  <div>01</div>
  <div class="align-self-end ...">02</div>
  <div>03</div>
</div>

Stretch

Use align-self-stretch to stretch an item to fill the container’s cross axis, despite the container’s align-items value. This is the browser default behavior.

<div class="d-flex align-items-stretch ...">
  <div>01</div>
  <div class="align-self-stretch ...">02</div>
  <div>03</div>
</div>

Breakpoints

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

.align-self-sm-auto
.align-self-sm-start
.align-self-sm-end
.align-self-sm-center
.align-self-sm-baseline
.align-self-sm-stretch
.align-self-md-auto
.align-self-md-start
.align-self-md-end
.align-self-md-center
.align-self-md-baseline
.align-self-md-stretch
.align-self-lg-auto
.align-self-lg-start
.align-self-lg-end
.align-self-lg-center
.align-self-lg-baseline
.align-self-lg-stretch
.align-self-xl-auto
.align-self-xl-start
.align-self-xl-end
.align-self-xl-center
.align-self-xl-baseline
.align-self-xl-stretch
.align-self-xxl-auto
.align-self-xxl-start
.align-self-xxl-end
.align-self-xxl-center
.align-self-xxl-baseline
.align-self-xxl-stretch

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

<div class="align-self-auto align-self-md-end">
  <!-- ... -->
</div>