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

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

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

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

リンクなし

Card title

This is some text within a card block.

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

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

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