align-items-start

bootstrap5.css

bootstrap5.css
.align-items-start {
  align-items: flex-start !important;
}

html bootstrap5 Sample

rowとcolの整列垂直:align-items-startとalign-items-centerとalign-items-end


col
col
col
col
col
col
col
col
col
  <!-- 上寄せ、高さは、隣接rのrowに設定する -->
  <div class="row align-items-start border bg-light">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row align-items-center border bg-light">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <!-- 下寄せ高さは隣接rowで決まる模様 -->
  <div class="row align-items-end border bg-light">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>

flexコンテナー内のアイテムの配置/上:align-items-start


flex文字01
flex文字02
flex文字03
  <div class="d-flex align-items-start" style="height: 200px">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
  </div>

aタグに複数の要素を入れる:list-group-itemとflex-column


  <!-- divにlist-groupを設定する -->
  <div class="list-group">
    <!-- aタグの中で書くことで、全体をクリックできるようになる -->
    <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
      <!-- justify-content-betweenを使って左右に設置する -->
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">ヘッダ1</h5>
        <small>smallコンテンツ1</small>
      </div>
      <p class="mb-1">pコンテンツ1</p>
      <small>smallコンテンツ</small>
    </a>
    <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">ヘッダ2</h5>
        <small class="text-muted">smallコンテンツ2text-mutedあり</small>
      </div>
      <p class="mb-1">pコンテンツ2</p>
      <small class="text-muted">smallコンテンツ2text-mutedあり</small>
    </a>
  </div>

js 縦タブパネル:navとnav-tabsとdata-bs-toggleとtablist


縦パネル1Home

縦パネル2Profile

縦パネル3Messages

縦パネル4Settings

  <div class="d-flex align-items-start">
    <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" href="#v-pills-home" role="tab"
        aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" href="#v-pills-profile" role="tab"
        aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" href="#v-pills-messages" role="tab"
        aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" href="#v-pills-settings" role="tab"
        aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </div>
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
        <p>縦パネル1Home</p>
      </div>
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
        <p>縦パネル2Profile</p>
      </div>
      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
        <p>縦パネル3Messages</p>
      </div>
      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
        <p>縦パネル4Settings</p>
      </div>
    </div>
  </div>