align-self-end

bootstrap5.css

.align-self-end {
  -ms-flex-item-align: end !important;
  align-self: flex-end !important;
}

html bootstrap5 Sample

カラム単位での垂直方向整列：align-self-*

align-self-start

align-self-center

align-self-end

  <div class="row">
    <!-- 垂直上寄せ -->
    <div class="col align-self-start">align-self-start</div>
    <!-- 垂直中央寄せ -->
    <div class="col align-self-center">align-self-center</div>
    <!-- 垂直下寄せ -->
    <div class="col align-self-end">align-self-end</div>
  </div>

flexコンテナー内のアイテムの配置/自身下：align-self-end

flex文字01

flex文字02（align-self-end）

flex文字03

  <div class="d-flex" style="height: 100px">
    <div>flex文字01</div>
    <div class="align-self-end">flex文字02（align-self-end）</div>
    <div>flex文字03</div>
  </div>