Card（カード）

カード

カードは、画像やテキストなどをコンパクトにレイアウトできるコンポーネントです。典型的な使い方として以下のような例があります。

<div class="card">
    <img class="card-img-top" src="./paris.jpg">
    <div class="card-body">
        <h5 class="card-title">ローマ + パリ</h5>
        <p class="card-text">94,800 ~ 234,800円</p>
        <p class="card-text">【21年～秋・冬出発も受付中！】 一度は訪れたい！
世界に愛される憧れの2都市 ローマ×パリ 周遊 往路は安心の直行便♪リーズナブルなエコノミークラスホテル宿泊　全朝食付き　8日間【羽田発】</p>
        <a href="#" class="btn btn-primary">このツアーを見る</a>
    </div>
</div>

トップに画像を置く場合、.card 内に、.card-img-top と .card-body を置く構成になる
.card-body 内にはテキストやボタンを置くことが多く、.card-title , .card-subtitle , .card-text などを配置する
カードは外側の要素に対して幅100%表示となるため、外側のカラムなどでサイズ制御することが多い

このようにカードには子要素向けのクラスがいくつか定義されていますが、個別に見ると実は劇的な装飾効果はありません。 .card-body により適切なpaddingを設定できたら、その内部には任意の要素を配置できます。ボタンは一般的な .btn のボタンを利用でき、見出しも<h*>タグによるサイズ調整が効きます。

ヘッダーとフッター

見出しをテキスト主体のカードとするケースでは、 .card-header や .card-footer も利用できます。

<div class="card">
    <h5 class="card-header">ローマ + パリ</h5>
    <img class="w-100" src="./paris.jpg">
    <div class="card-body">
        <p class="card-text">【21年～秋・冬出発も受付中！】 一度は訪れたい！
世界に愛される憧れの2都市 ローマ×パリ 周遊 往路は安心の直行便♪リーズナブルなエコノミークラスホテル宿泊　全朝食付き　8日間【羽田発】</p>
        <a href="#" class="btn btn-primary">このツアーを見る</a>
    </div>
    <div class="card-footer">94,800 ~ 234,800円</div>
</div>

このように、.card-header や .card-footer を利用すると見出し表現をカード上下に配置できます。また、ヘッダーやフッターはどちらか一方だけ利用しても問題ありません。