Bootstrap4 カード全体にリンクをはる方法

Bootstrap4では、カード型のデザインを簡単につくることができます。
そして、つくったカード全体にリンクをはる際も、CSSのカスタマイズ一切なしで対応できます！

a要素を「a.box{display:block:}」でブロック要素化して…といった面倒な作業とはお別れできます。

カード全体にリンクをはる方法　基本形

<div class="row">
<div class="col-lg-6">
リンクなし
<div class="card">
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">
       This is some text within a card block.
    </p>
  </div>
</div>
</div>

<div class="col-lg-6">
リンクあり
<a href="#" class="card">
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">
       This is some text within a card block.
    </p>
  </div>
</a>
</div>
</div>

カード全体にリンクをはりたい場合は、
<div class=”card”>ではなく、<a class=”card”>とするのがポイントです。

Card-deckで隣り合うカードの高さを揃えたときに、カード全体にリンクをはる方法

<div class="card-deck">
  <div class="card">
    <a href="#" class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </a>
  </div>
  <div class="card">
    <a href="#" class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </a>
  </div>
</div>

カード内のコンテンツを囲むdivを<div class=”card-block”>ではなく、<a class=”card-body”>
とするのがポイントです。
<a class=”card-block”>とすると、縦の高さいっぱいのリンクエリアとはならず、コンテンツの高さ分だけのリンクエリアとなります。