とほほのBootstrap 4入門

1. トップ
2. Bootstrap 4入門
3. カード

カード

.card は、フレキシブルで拡張可能なコンテンツコンテナであるカードを表示します。.card-img-*, .card-body, .card-title, .card-subtitle, .card-text, .card-link は、画像、本文、タイトル、サブタイトル、テキスト、リンクを表示します。

<div class="card" style="width:15rem;">
  <img class="card-img-top" src="../image/100x60.png" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle text-muted">Subtitle</h6>
    <p class="card-text">A card is a flexible and extensible content container. It includes ...</p>
    <a href="#" class="card-link">Card link</a>
  </div>
</div>

カードヘッダ・フッタ

.card-header, .card-footer は、カードのヘッダやフッタを表示します。

<div class="card" style="width:18rem;">
  <div class="card-header">Card header</div>
  <div class="card-body">
    ...
  </div>
  <div class="card-footer">Card footer</div>
</div>

ナビゲーション

カードヘッダでナビゲーションタブを使用する場合は .card-header-tabs を指定します。

<div class="card">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item"><a class="nav-link active" href="#">Tab#1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Tab#2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Tab#3</a></li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <div class="card-text">Card text...</div>
  </div>
</div>

.nav-pills を使用する場合は .card-header-pills を指定します。

<div class="card">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item"><a class="nav-link active" href="#">Tab#1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Tab#2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Tab#3</a></li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <div class="card-text">Card text...</div>
  </div>
</div>

イメージオーバーレイ

.card-img, .card-img-overlay は、カードのタイトルやテキストをカードの画像に重ねて表示します。

<div class="card bg-dark text-white" style="width:15rem;">
  <img src="../image/100x60.png" class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text ...</p>
  </div>
</div>

カードグループ

.card-group は、複数のカードを横に並べたカードグループを表示します。

<div class="card-group" style="width:18rem">
  <div class="card">
    :
  </div>
  <div class="card" style="width:9rem">
    :
  </div>
</div>

カードデッキ

.card-deck は、複数のカードを横に隙間を開けて並べたカードデッキを表示します。

<div class="card-deck" style="width:18rem">
  <div class="card">
    :
  </div>
  <div class="card">
    :
  </div>
</div>

カードカラム

.card-columns は、カードをカラム表示します。カラム数は画面の幅によって適度に変化しますが、CSS の columns を指定することにより変更可能です。

<div class="card-columns">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

---