カード：card
カード、画像あり、タイトル、本文、ボタンのセット：card
<!-- カードの枠：card -->
<div class="card" style="max-width: 25rem;">
<!-- レイアウトされる画像：card-img-top -->
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=img" alt="...">
<!-- カード本文：card-body -->
<div class="card-body">
<!-- カードタイトル：card-title -->
<h4 class="card-title">カードのタイトル</h4>
<!-- カードの内容文：card-text -->
<p class="card-text">カードの内容</p>
<a href="#" class="btn btn-primary">ボタン</a>
</div>
</div>
カードの背景色と文字色の設定：text-whiteとbg-primary
背景色、文字色指定なし
カードのタイトル
カードの内容
背景色：bg-primary、文字色：text-white
カードのタイトル
カードの内容
背景色：bg-secondary、文字色：text-white
カードのタイトル
カードの内容
背景色：bg-success、文字色：text-white
カードのタイトル
カードの内容
背景色：bg-danger、文字色：text-white
カードのタイトル
カードの内容
背景色：bg-warning、文字色：text-white
カードのタイトル
カードの内容
背景色：bg-info、文字色：text-white
カードのタイトル
カードの内容
背景色：bg-light
カードのタイトル
カードの内容
カードのヘッダー
カードのタイトル
カードの内容
<div class="card mb-3" style="max-width: 25rem;">
<div class="card-header">背景色、文字色指定なし</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
</div>
<div class="card text-white bg-primary mb-3" style="max-width: 25rem;">
<div class="card-header">背景色：bg-primary、文字色：text-white</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 25rem;">
<div class="card-header">背景色：bg-secondary、文字色：text-white</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 25rem;">
<div class="card-header">背景色：bg-success、文字色：text-white</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 25rem;">
<div class="card-header">背景色：bg-danger、文字色：text-white</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 25rem;">
<div class="card-header">背景色：bg-warning、文字色：text-white</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 25rem;">
<div class="card-header">背景色：bg-info、文字色：text-white</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
</div>
<div class="card bg-light mb-3" style="max-width: 25rem;">
<div class="card-header">背景色：bg-light</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 25rem;">
<div class="card-header">カードのヘッダー</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
</div>
カードのヘッダとフッターの背景色を変える：bg-transparent
ヘッダー初期設定の背景色
カードのタイトル
カードの内容
ヘッダー背景色の除去：bg-transparent
カードのタイトル
カードの内容
<div class="card mb-3" style="max-width: 25rem;">
<!-- ヘッダとフッターでデフォルトの背景色 -->
<div class="card-header">ヘッダー初期設定の背景色</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
<div class="card-footer">フッター初期設定の背景色</div>
</div>
<div class="card mb-3" style="max-width: 25rem;">
<!-- デフォルトの背景色を変える場合：bg-transparent -->
<div class="card-header bg-transparent">ヘッダー背景色の除去：bg-transparent</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
<div class="card-footer bg-transparent">フッター背景色の除去：bg-transparent</div>
</div>
カードのデフォルトのボーダー色を変更する：border-primary
カードのヘッダー
カードのタイトル
カードの内容
カードのヘッダー
カードのタイトル
カードの内容
<div class="card mb-3" style="max-width: 25rem;">
<div class="card-header">カードのヘッダー</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
</div>
<!-- カード枠のボーダー色：青 border-primary -->
<div class="card border-primary mb-3" style="max-width: 25rem;">
<!-- ヘッダーのボーダー色：青 border-primary -->
<div class="card-header border-primary">カードのヘッダー</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
</div>
カードデッキによるレイアウト：card-deck
カード01
カードの内容
カード02
カードの内容
カード03
カードの内容
カードの内容
<div class="card-deck">
<!-- 複数のカードをレイアウトするためにcard-deckを使う、隙間ができる -->
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード01</h4>
<p class="card-text">カードの内容</p>
</div>
<div class="card-footer">
<small class="text-muted">カードのフッター</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード02</h4>
<p class="card-text">カードの内容</p>
</div>
<div class="card-footer">
<small class="text-muted">カードのフッター</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード03</h4>
<p class="card-text">カードの内容</p>
<p class="card-text">カードの内容</p>
</div>
<div class="card-footer">
<small class="text-muted">カードのフッター</small>
</div>
</div>
</div>
カードグループによるレイアウト：card-group
カード01
カードの内容
カード02
カードの内容カードの内容
カード03
カードの内容
カードの内容
<div class="card-group">
<!-- 複数のカードをレイアウトするためにcard-groupを使う、隙間が出来ない -->
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード01</h4>
<p class="card-text">カードの内容</p>
</div>
<div class="card-footer">
<small class="text-muted">カードのフッター</small>
</div>
</div>
<!-- カード2 -->
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード02</h4>
<p class="card-text">カードの内容カードの内容</p>
</div>
<div class="card-footer">
<small class="text-muted">カードのフッター</small>
</div>
</div>
<!-- カード3 -->
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード03</h4>
<p class="card-text">カードの内容</p>
<p class="card-text">カードの内容</p>
</div>
<div class="card-footer">
<small class="text-muted">カードのフッター</small>
</div>
</div>
</div>
カードカラムによるレイアウト：card-columns
カード01
ここに文章が入ります
カード02
文章
カード03
文章
文章
カード04
文章
カード05
文章
文章
カード07
文章
カード08
文章
文章
<div class="card-columns">
<!-- ★複数のカードをレイアウトするためにcard-columnsを使う、flex同様、自動整列される -->
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/640x480/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード01</h4>
<p class="card-text">ここに文章が入ります</p>
</div>
</div>
<!-- カード02 -->
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>カード02</p>
<p>文章</p>
<footer class="blockquote-footer"> <small class="text-muted">文章</small> </footer>
</blockquote>
</div>
<!-- カード03 -->
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/640x480/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード03</h4>
<p class="card-text">文章</p>
<p class="card-text"><small class="text-muted">文章</small></p>
</div>
</div>
<!-- カード04 -->
<div class="card bg-secondary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>カード04</p>
<p>文章</p>
<footer class="blockquote-footer"> <small> 文章 </small> </footer>
</blockquote>
</div>
<!-- カード05 -->
<div class="card text-center">
<div class="card-body">
<h4 class="card-title">カード05</h4>
<p class="card-text">文章</p>
<p class="card-text"><small class="text-muted">文章</small></p>
</div>
</div>
<!-- カード06 -->
<div class="card">
<img class="card-img" src="https://via.placeholder.com/640x480/FFFF00/000000?text=Card 06" alt="...">
</div>
<!-- カード07 -->
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>カード07</p>
<p>文章</p>
<footer class="blockquote-footer"> <small class="text-muted">文章</small> </footer>
</blockquote>
</div>
<!-- カード08 -->
<div class="card">
<div class="card-body">
<h4 class="card-title">カード08</h4>
<p class="card-text">文章</p>
<p class="card-text"><small class="text-muted">文章</small></p>
</div>
</div>
</div>
グリッドレイアウトとカード→カード幅の制約が決まる：card
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
<a href="#" class="btn btn-primary">ボタン</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
<a href="#" class="btn btn-primary">ボタン</a>
</div>
</div>
</div>
</div>
カードに画像を配置する：card-img-top
カードの内容
<!-- カード上部に画像を配置：card-img-top -->
<div class="card mb-3" style="max-width: 25rem;">
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<p class="card-text">カードの内容</p>
</div>
</div>
カードに下画像を配置する：card-img-bottom
カードの内容
<!-- カード下部に画像を配置：card-img-bottom -->
<div class="card" style="max-width: 25rem;">
<div class="card-body">
<p class="card-text">カードの内容</p>
</div>
<img class="card-img-bottom" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-bottom"
alt="...">
</div>
カードの画像とテキストを重ね合わせる：card-img-overlay
<div class="card">
<img class="card-img" src="https://via.placeholder.com/960x450/FFFF00/000000?text=card-img" alt="...">
<div class="card-img-overlay">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
</div>
カード内のボーダーの無いリストグループ：list-group-flush
<div class="card" style="max-width: 25rem;">
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="image">
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
<!-- list-group-flushは、ボーダーの無いリストグループ-->
<ul class="list-group list-group-flush">
<li class="list-group-item">リスト01</li>
<li class="list-group-item">リスト02</li>
<li class="list-group-item">リスト03</li>
</ul>
<!-- カードの本文：card-body -->
<div class="card-body">
<a href="#" class="card-link">カード内リンク</a>
<a href="#" class="card-link">カード内リンク</a>
</div>
</div>
カードにピル型ナビゲーションを組み込む：nav-pillsとcard-header-pills
<div class="card">
<div class="card-header">
<!-- ピル型のナビゲーション：card-header-pills -->
<ul class="nav nav-pills card-header-pills">
<li class="nav-item"> <a class="nav-link active" href="#">アクティブ</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">リンク</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">リンク</a> </li>
</ul>
</div>
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p> <a href="#" class="btn btn-primary">ボタン</a>
</div>
</div>
カードにナビゲーションを組み込む：nav-tabs
<div class="card">
<!-- カードのヘッダー -->
<div class="card-header">
<!-- タブ型のナビゲーション：card-header-tabs -->
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item"><a class="nav-link active" href="#">アクティブ</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク</a></li>
</ul>
</div>
<!-- カードの本文 -->
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
<a href="#" class="btn btn-primary">ボタン</a>
</div>
</div>
カードのサイズを変更する：w-75
カード内のテキストを左寄せ、中央、右寄せ：text-centerとtext-right
<!-- 標準（左寄せ） -->
<div class="card">
<div class="card-body">
<h4 class="card-title">標準（左寄せ）</h4>
<p class="card-text">カードの内容</p>
<a href="#" class="btn btn-primary">ボタン</a>
</div>
</div>
<!-- divに設定する、中央寄せ：text-center -->
<div class="card text-center">
<div class="card-body">
<h4 class="card-title">中央寄せ：text-center</h4>
<p class="card-text">カードの内容</p>
<a href="#" class="btn btn-primary">ボタン</a>
</div>
</div>
<!-- divに設定する、右寄せ：text-right -->
<div class="card text-right">
<div class="card-body">
<h4 class="card-title">右寄せ：text-right</h4>
<p class="card-text">カードの内容</p>
<a href="#" class="btn btn-primary">ボタン</a>
</div>
</div>