とほほのBootstrap 4入門

トップ > Bootstrap 4入門 > カード

カード

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

Sample
Card image cap
Card title
Subtitle

A card is a flexible and extensible content container. It includes ...

Card link
Code
<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 は、カードのヘッダやフッタを表示します。

Sample
Card header
...
Card footer
Code
<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 を指定します。

Sample
Card title
Card text...
Code
<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 を指定します。

Sample
Card title
Card text...
Code
<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 は、カードのタイトルやテキストをカードの画像に重ねて表示します。

Sample
...
Card title

This is a wider card with supporting text ...

Code
<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 は、複数のカードを横に並べたカードグループを表示します。

Sample
Image
Card title

Card text...

Image
Card title

Card text...

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

カードデッキ

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

Sample
Image
Card title

Card text...

Image
Card title

Card text...

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

カードカラム

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

Sample
Card A
Card B
Card C
Card D
Card E
Code
<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>
Copyright (C) 2015-2019 杜甫々
初版:2015年9月6日 最終更新:2019年1月6日
http://www.tohoho-web.com/bootstrap/card.html