.card
は、フレキシブルで拡張可能なコンテンツコンテナであるカードを表示します。.card-img-*
, .card-body
, .card-title
, .card-subtitle
, .card-text
, .card-link
は、画像、本文、タイトル、サブタイトル、テキスト、リンクを表示します。
A card is a flexible and extensible content container. It includes ...
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;"> <h5 class="card-header">Card header</h5> <div class="card-body"> : </div> <h5 class="card-footer">Card footer</h5> </div>
.card-group
は、複数のカードを横に並べたカードグループを表示します。
Card text...
Card text...
<div class="card-group" style="width:18rem"> <div class="card"> : </div> <div class="card"> : </div> </div>
.card-deck
は、複数のカードを横に隙間を開けて並べたカードデッキを表示します。
Card text...
Card text...
<div class="card-deck" style="width:18rem"> <div class="card"> : </div> <div class="card"> : </div> </div>