d-flex w-100 justify-content-between

html bootstrap5 Sample

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>