bootstrap4.css
.card-link:hover {
  text-decoration: none;
}
bootstrap4.css
.card-link + .card-link {
  margin-left: 1.25rem;
}
■カード:card:コンポーネント:カード内にコンテンツを複合する

Card image cap

カードのタイトル

カードの内容

  • リスト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="Card image cap">
    <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>