Bootstrap card

Bootstrap CSS フレームワークの card クラスを使うと、カード状のコンテナを表示することができます。card の使い方をご紹介します。

Bootstrapのカード関連クラス

クラス	説明
card	カードのコンテナ
card-img-top	カードのアイキャッチ画像
card-header	カードのヘッダー
card-body	カードの本体
card-title	カードのタイトル
card-subtitle	カードのサブタイトル
card-text	カード内のテキスト
card-link	カード内のリンク
card-footer	カードのフッター
card-img	カード内の背景画像
card-img-overlay	カード内のオーバレイ画像

.card

Bootstrap でカードを作成するには、card クラスを指定する。

<div class="card">
  <div class="card-body">
    <p class="card-text">J. R. R. Tolkien's epic adventure</p>
  </div>
</div>

.card-title

Bootstrap でカードにタイトルを付けるには、card-title クラスを指定する。

<div class="card">
  <div class="card-body">
    <h5 class="card-title">The Lord of the Rings</h5>
    <p class="card-text">J. R. R. Tolkien's epic adventure</p>
  </div>
</div>

.card-subtitle

Bootstrap を使ってカードにサブタイトルを付けるには、card-subtitle クラスを指定する。

<div class="card">
  <div class="card-body">
    <h5 class="card-title">The Lord of the Rings</h5>
    <h6 class="card-title">The Fellowship of the Ring</h6>
    <p class="card-text">The first part of J. R. R. Tolkien's epic adventure</p>
  </div>
</div>

.card-header

Bootstrap でカードにヘッダを付けるには、card-header クラスを指定する。

<div class="card">
  <div class="card-header">
    <p class="card-text">The Lord of the Rings</p>
  </div>
  <div class="card-body">
    <p class="card-text">J. R. R. Tolkien's epic adventure</p>
  </div>
</div>

.card-footer

Bootstrap でカードにフッタを付けるには、card-footer クラスを指定する。

<div class="card">
  <div class="card-body">
    <p class="card-text">J. R. R. Tolkien's epic adventure</p>
  </div>
  <div class="card-footer">
    <p class="card-text">J. R. R. Tolkien</p>
  </div>
</div>

.card-link

Bootstrap を使ってカードにリンクを作成するには、card-link クラスを指定する。

<div class="card">
  <div class="card-body">
    <p class="card-text">J. R. R. Tolkien's epic adventure</p>
    <p class="card-text"><a href="#" class="card-link">The Fellowship of the Ring</a></p>
  </div>
</div>

.card-img-top

Bootstrap でカードに画像を付けるには、card-img-top クラスを指定する。

<div class="card" style="width:20rem;">
  <img src="card.png" class="card-img-top">
  <div class="card-body">
    <p class=card-text">Laptop computer</p>
  </div>
</div>

.list-group

Bootstrap でカードにリストを付けるには、list-group クラスを指定する。

<div class="card">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">The Fellowship of the Ring</li>
    <li class="list-group-item">The Two Towers</li>
    <li class="list-group-item">The Return of the King</li>
  </ul>
</div>