d-flex justify-content-between

html bootstrap5 Sample

flex横の均等配置/左と右は合わせて、間隔、余白ありで整列：justify-content-between

flex文字01
flex文字02
flex文字0333333
  <div class="d-flex justify-content-between">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字0333333</div>
  </div>

バッジ付きリストグループ：badge-pill

  • リスト項目1 14
  • リスト項目2 2
  • リスト項目3 1 
  <ul class="list-group">
    <!-- justify-content-betweenで左と右端にする -->
    <!-- align-items-centerで縦整列にする -->
    <li class="list-group-item d-flex justify-content-between align-items-center">
      リスト項目1
      <span class="badge badge-primary badge-pill">14</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      リスト項目2
      <span class="badge badge-primary badge-pill">2</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      リスト項目3
      <span class="badge badge-primary badge-pill">1</span>
    </li>
  </ul>

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

hヘッダ
smallコンテンツ

pコンテンツ

smallコンテンツ
hヘッダ
smallコンテンツ

pコンテンツ

smallコンテンツ 
  <div class="list-group">
    <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">hヘッダ</h5>
        <small>smallコンテンツ</small>
      </div>
      <p class="mb-1">pコンテンツ</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">hヘッダ</h5>
        <small class="text-muted">smallコンテンツ</small>
      </div>
      <p class="mb-1">pコンテンツ</p>
      <small class="text-muted">smallコンテンツ</small>
    </a>
  </div>