Align self

The align self class sets the align-self property. It controls how an individual item aligns itself along the container’s cross axis, allowing it to override the container’s align-items setting for that specific item.

Overview

align-self-auto

align-self: auto;

align-self-baseline

align-self: baseline;

align-self-center

align-self: center;

align-self-stretch

align-self: stretch;

align-self-start

align-self: start;

align-self-end

align-self: end;

Examples

Auto
align-self-auto

The item with the align-self-auto class follows the container’s align-items setting and aligns automatically along the cross axis.

In row layouts, alignment follows the vertical cross axis.
In column layouts, alignment follows the horizontal cross axis.

<div class="d-flex align-items-center">
  <p>1</p>
  <p class="align-self-auto">2</p>
  <p>3</p>
</div>

Baseline
align-self-baseline

The item with the align-self-baseline class aligns its text baseline with the baselines of other items along the cross axis.

In row layouts, baseline alignment is vertical.
In column layouts, baseline alignment is horizontal.

<div class="d-flex align-items-start">
  <p class="pb-800">1</p>
  <p class="align-self-baseline">2</p>
  <p class="pt-900">3</p>
</div>

Centre
align-self-center

The item with the align-self-center class is centred along the cross axis, overriding the container’s align-items setting.

In row layouts, the item is centred vertically.
In column layouts, the item is centred horizontally.

<div class="d-flex align-items-end">
  <p>1</p>
  <p class="align-self-center">2</p>
  <p>3</p>
</div>

Stretch
align-self-stretch

The item with the align-self-stretch class stretches to fill the container along the cross axis (unless a fixed size is set), overriding the container’s align-items setting.

In row layouts, the item stretches vertically.
In column layouts, the item stretches horizontally.

<div class="d-flex align-items-center">
  <p>1</p>
  <p class="align-self-stretch">2</p>
  <p>3</p>
</div>

Start
align-self-start

The item with the align-self-start class aligns to the start of the cross axis, overriding the container’s align-items setting.

In row layouts, the item aligns to the top.
In column layouts, the items aligns to the left.

<div class="d-flex align-items-center">
  <p>1</p>
  <p class="align-self-start">2</p>
  <p>3</p>
</div>

End
align-self-end

The item with the align-self-end class aligns to the end of the cross axis, overriding the container’s align-items setting.

In row layouts, the item aligns to the bottom.
In column layouts, the item aligns to the right.

<div class="d-flex align-items-center">
  <p>1</p>
  <p class="align-self-end">2</p>
  <p>3</p>
</div>

Conditional styling Apply this style to specific screen sizes Use a responsive layout prefix to apply this class only to a specified screen size. The available breakpoints are:

• xs: > 480px
• sm: > 640px
• md: > 768px
• lg: > 1024px
• xl: > 1280px

  
<div class="xs:align-self-center ...">
  ...
</div>
  

Learn more about the responsive layout prefix.