とほほの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 title
Card text...
Code
<div class="card" style="width: 18rem;">
  <h5 class="card-header">Card header</h5>
  <div class="card-body">
    :
  </div>
  <h5 class="card-footer">Card footer</h5>
</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">
    :
  </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>

Copyright (C) 2015-2018 杜甫々
初版:2015年9月6日 最終更新:2018年6月17日
http://www.tohoho-web.com/bootstrap/card.html