【bootstrap】カード全体にリンクを貼る

こんにちは。
Bootstrapのcardコンポーネント全体にリンクを貼るスニペットです。
公式にも記載がありますが、cardコンポーネントの説明ではなくutilitiesの方に記載があるので、あえて用途を絞った場合の記事にしました。
参考になれば幸いです。

目次

1. 結論
2. サンプル
3. まとめ

1. 結論

「.stretched-link」を使用する

具体的には.card-text内のaタグに対して.stretched-linkクラスを当てます。

公式 Stretched link

2. サンプル

<div class="card">
  <div class="card-body">
    <a href="#" class="stretched-link">カード全体のリンク</a>
  </div>
</div>

※ bootstrap-vueでも、b-card-bodyタグ内のb-linkタグに.stretched-linkをあてれば同様の挙動になります

3.　まとめ

非常に簡単に対応できますよね。
素のCSSを書く必要なく構築できるのが嬉しいです。
とはいえここ最近のtailwind css離れは気になっている所ですが、まだまだ需要があるかなと思っています。