Align Self

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.

¶Start

Use the .flex-grow-1 class on any flex element to fill all the available space, while allowing the remaining two flex items their necessary space.

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

¶End

Use the .flex-grow-1 class on any flex element to fill all the available space, while allowing the remaining two flex items their necessary space.

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

¶Center

Use the .flex-grow-1 class on any flex element to fill all the available space, while allowing the remaining two flex items their necessary space.

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

¶Baseline

Use the .flex-grow-1 class on any flex element to fill all the available space, while allowing the remaining two flex items their necessary space.

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

¶Stretch

Use the .flex-grow-1 class on any flex element to fill all the available space, while allowing the remaining two flex items their necessary space.

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

¶Responsive

Responsive variations also exist for each align-self value. Use the .align-self-{breakpoint}-{value} for sm, md, lg, xl, and xxl to any existing align-self utility.

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