list-group list-group-flush

bootstrap5.css

.list-group-flush .list-group-item {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}

bootstrap5.css

.list-group-flush .list-group-item:last-child {
  margin-bottom: -1px;
}

bootstrap5.css

.list-group-flush:first-child .list-group-item:first-child {
  border-top: 0;
}

bootstrap5.css

.list-group-flush:last-child .list-group-item:last-child {
  margin-bottom: 0;
  border-bottom: 0;
}

html bootstrap5 Sample

カード内のボーダーの無いリストグループ：list-group-flush

カードのタイトル

カードの内容

リスト01
リスト02
リスト03

カード内リンクカード内リンク

  <div class="card" style="max-width: 25rem;">
    <img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="image">
    <div class="card-body">
      <h4 class="card-title">カードのタイトル</h4>
      <p class="card-text">カードの内容</p>
    </div>
    <!-- list-group-flushは、ボーダーの無いリストグループ-->
    <ul class="list-group list-group-flush">
      <li class="list-group-item">リスト01</li>
      <li class="list-group-item">リスト02</li>
      <li class="list-group-item">リスト03</li>
    </ul>
    <!-- カードの本文：card-body -->
    <div class="card-body">
      <a href="#" class="card-link">カード内リンク</a>
      <a href="#" class="card-link">カード内リンク</a>
    </div>
  </div>

li 枠なしのリストグループ：list-group-flush

リスト項目1
リスト項目2
リスト項目3

  <div>
    <ul class="list-group list-group-flush">
      <li class="list-group-item">リスト項目1</li>
      <li class="list-group-item">リスト項目2</li>
      <li class="list-group-item">リスト項目3</li>
    </ul>
  </div>