Align Self

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

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 gap-4">
  <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 gap-4">
  <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>