Align Items

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 align-items-start">
  <div>1</div>
  <div>2</div>
  <div>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>1</div>
  <div>2</div>
  <div>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 align-items-center">
  <div>1</div>
  <div>2</div>
  <div>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>1</div>
  <div>2</div>
  <div>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 align-items-stretch">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

¶Responsive

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

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