カード～Bootstrap4移行ガイド

Bootstrapのカードは、複数のバリエーションとオプションを備えた柔軟で拡張可能なコンテンツコンテナを提供。

概要（About）

カードは、柔軟で拡張可能なコンテンツコンテナであり、ヘッダーとフッターのオプション、多種多様なコンテンツ、文脈上的な背景色、強力な表示用のオプションが組み込まれている。Bootstrap3に精通している場合は、かつてのパネル（Panels）、囲み枠（Wells）、サムネイル（Thumbnails）が、カードに置き換えられる。これらのコンポーネントと同様の機能をカードの修飾子クラスとして利用可能。

基本のカードの設定（Example）

カードはできるだけ少ないマークアップとスタイルで構築されるが、それでも大量の制御とカスタマイズを実現。Flexboxで構築されているため、簡単に配置ができ、他のBootstrapコンポーネントとうまく組み合わせ可能。デフォルトでは余白の設定がないので、必要に応じて空白ユーティリティを使用する。

以下は、内容が混在し、幅が固定された基本カードの実例。カードには固定幅がないので、親要素の幅いっぱいに広がる。これは、様々なサイズオプションで簡単にカスタマイズ可能。

見本

カードのタイトル

以下のテキストを追加のコンテンツへの自然な導入としてサポート。カードのコンテンツカードのコンテンツ

ボタン

設定例

<div class="card" style="width: 18rem;">
	<img src="..." alt="カードの画像" class="card-img-top">
	<div class="card-body">
		<h5 class="card-title">カードのタイトル</h5>
		<p class="card-text">以下のテキストを追加のコンテンツへの自然な導入としてサポート。 カードのコンテンツ カードのコンテンツ</p>
		<a href="#" class="btn btn-primary">ボタン</a>
	</div>
</div>

【設定】

div.card > コンテンツ（以下のコンテンツタイプを参照）

v3のコンポーネントとの変更箇所

1. サムネイルの設定との変更箇所

見本

Bootstrap3.xの設定例赤背景が変更箇所

<div class="row">
	<div class="col-sm-6 col-md-3">
		<a href="#" class="thumbnail">
			<img src="..." alt="...">
		</a>
	</div>
	...
</div>

Bootstrap4.xの設定例緑背景が変更箇所

<div class="row">
	<div class="col-sm-6 col-md-3">
		<a href="#" class="card">
			<img class="card-img" src="..." alt="...">
		</a>
	</div>
	...
</div>

【変更履歴】

【v4.0.0】
- a.thumbnail ⇒ a.card《カード全体》
- <img> ⇒ img.card-img《サムネイル画像部分》
- .img-thumbnail（枠付きサムネイル）を追加する場合は、.card-img ではなく、.card に追加すること

2. コンテンツ付きサムネイルとの変更箇所

見本

タイトル

コンテンツコンテンツコンテンツコンテンツ

ボタンボタン

タイトル

コンテンツコンテンツコンテンツコンテンツ

ボタンボタン

タイトル

コンテンツコンテンツコンテンツコンテンツ

ボタンボタン

タイトル

コンテンツコンテンツコンテンツコンテンツ

ボタンボタン

Bootstrap3.xの設定例赤背景が変更箇所

<div class="row">
	<div class="col-sm-6 col-md-3">
		<div class="thumbnail">
			<img src="..." alt="画像">
			<div class="caption">
				<h3>タイトル</h3>
				<p>コンテンツ コンテンツ コンテンツ コンテンツ</p>
				<p><a href="#" class="btn btn-primary">ボタン</a> <a href="#" class="btn btn-default">ボタン</a></p>
			</div><!-- /.caption -->
		</div><!-- /.thumbnail -->
	</div><!-- /.col-sm-6.col-md-3 -->
	...
</div><!-- /.row -->

Bootstrap4.xの設定例緑背景が変更箇所

<div class="row">
	<div class="col-sm-6 col-md-3">
		<div class="card img-thumbnail">
			<img class="card-img-top" src="..." alt="画像">
			<div class="card-body px-2 py-3">
				<h5 class="card-title">タイトル</h5>
				<p class="card-text">コンテンツ コンテンツ コンテンツ コンテンツ</p>
				<p class="mb-0"><a href="#" class="btn btn-primary btn-sm">ボタン</a> <a href="#" class="btn btn-secondary btn-sm">ボタン</a></p>

			</div><!-- /.card-body -->
		</div><!-- /.card -->
	</div><!-- /.col-sm-6.col-md-3 -->
	...
</div><!-- /.row -->

【変更履歴】

【v4.0.0】
- div.thumbnail ⇒ div.card.img-thumbnail《カード全体》
- <img> ⇒ img.card-img-top《サムネイル画像部分》
- div.caption ⇒ div.card-body.px-2.py-3《カードブロック》
- <h3> ⇒ h5.card-title《タイトル》

3. ヘッダ/フッタ付きパネルとの変更箇所

見本

ヘッダのタイトル

コンテンツ

フッタ

Bootstrap3.xの設定例赤背景が変更箇所

<div class="panel panel-default">
	<div class="panel-heading">
		<h3 class="panel-title">ヘッダのタイトル</h3>
	</div>
	<div class="panel-body">
		コンテンツ
	</div>
	<div class="panel-footer">フッタ</div>
</div>

Bootstrap4.xの設定例緑背景が変更箇所

<div class="card">
	<h5 class="card-header">ヘッダのタイトル</h5>
	<div class="card-body">
		コンテンツ
	</div>
	<div class="card-footer">フッタ</div>
</div>

【変更履歴】

【v4.0.0】
- div.panel.panel-default ⇒ div.card《カード全体》
- div.panel-heading > h*.panel-title ⇒ h5.card-header《ヘッダ》
  （またはdiv.panel-heading ⇒ div.card-header）
- div.panel-body ⇒ div.card-body《コンテンツ》
- div.panel-footer ⇒ div.card-footer《フッタ》

4. テーブル付きパネルとの変更箇所

見本

ヘッダ

コンテンツ　コンテンツ　コンテンツ　コンテンツ　コンテンツ　コンテンツ　コンテンツ　コンテンツ　コンテンツ　コンテンツ　コンテンツ　コンテンツ

#	見出し	見出し	見出し
1	テーブルセル	テーブルセル	テーブルセル
2	テーブルセル	テーブルセル	テーブルセル
3	テーブルセル	テーブルセル	テーブルセル

Bootstrap3.xの設定例赤背景が変更箇所

<div class="panel panel-default">
	<div class="panel-heading">ヘッダ</div>
	<div class="panel-body">
		コンテンツ...
	</div>
	<table class="table">
		...
	</table>
</div>

Bootstrap4.xの設定例緑背景が変更箇所

<div class="card">
	<div class="card-header">ヘッダ</div>
	<div class="card-body">
		コンテンツ...
	</div>
	<table class="table mb-0">
		...
	</table>
</div>

【変更履歴】

【v4.0.0】
- table.table に .mb-0 を追加《テーブル》

5. リストグループ付きパネルとの変更箇所

見本

ヘッダ

アイテム1
アイテム2
アイテム3

Bootstrap3.xの設定例赤背景が変更箇所

<div class="panel panel-default">
	<div class="panel-heading">ヘッダ</div>
	<div class="panel-body">
		コンテンツ...
	</div>
	<ul class="list-group">
		<li class="list-group-item">アイテム1</li>
		...
	</ul>
</div>

Bootstrap4.xの設定例緑背景が変更箇所

<div class="card">
	<div class="card-header">ヘッダ</div>
	<div class="card-body">
		コンテンツ...
	</div>
	<ul class="list-group list-group-flush">
		<li class="list-group-item">アイテム1</li>
		...
	</ul>
</div>

【変更履歴】

【v4.0.0】
- ul.list-group に .list-group-flush を追加《リストグループ》

6. 囲み枠の設定との変更箇所

見本

Bootstrap3.xの設定例赤背景が変更箇所

<div class="well">
	コンテンツ...
</div>

Bootstrap4.xの設定例緑背景が変更箇所

<div class="card card-body bg-light">
	コンテンツ...
</div>

【変更履歴】

【v4.0.0】
- div.well ⇒ div.card.card-body.bg-light

7. 囲み枠のサイズとの変更箇所

見本

●大きめ

●小さめ

※デフォルト（参考）

Bootstrap3.xの設定例赤背景が変更箇所

大きめ<div class="well well-lg">
	コンテンツ...
</div>

小さめ<div class="well well-sm">
	コンテンツ...
</div>

Bootstrap4.xの設定例緑背景が変更箇所

大きめ<div class="card card-body bg-light p-5">
	コンテンツ...
</div>

小さめ<div class="card card-body bg-light p-2">
	コンテンツ...
</div>

【変更履歴】

【v4.0.0】
- 大きめ：div.well.well-lg ⇒ div.card.card-body.bg-light.p-5
- 小さめ：div.well.well-sm ⇒ div.card.card-body.bg-light.p-2

コンテンツタイプ（Content types）

カードは、画像、テキスト、リストグループ、リンクなど、多種多様なコンテンツをサポートしている。サポートされている実例を次に示す。

ボディ（Body）

カードを構築するボディは .card-body 。カードの中に中身があるセクションが必要なときはいつでもそれを使用すること。

見本

●div.card > div.card-body

これはカードボディ内のテキスト。

●div.card.card-body

これもカードボディ内のテキスト。

設定例

div.card > div.card-body<div class="card">
	<div class="card-body">
		これはカードボディ内のテキスト。
	</div>
</div>

div.card.card-body<div class="card card-body">
	これもカードボディ内のテキスト。
</div>

【設定】

div.card > div.card-body
※ div.card > div.card-body は、他にコンテンツ要素がなければ、div.card.card-body でも可

タイトル、テキスト、リンク（Titles, text, and links）

カードタイトルは、<h*> タグに .card-title を追加して使用。同様に、<a> タグに .card-link を追加することによって、リンクが追加され、相互に隣接して配置される。

サブタイトルは、<h*> タグに .card-subtitle を追加して使用。.card-title と .card-subtitle のアイテムが .card-body アイテムに置かれていると、カードのタイトルとサブタイトルがうまく一致する。

見本

カードのタイトル

カードのサブタイトル

カードのタイトルに基づいて、カードのコンテンツの大部分を占める簡単なサンプルテキスト。

リンク1 リンク2

設定例

<div class="card" style="width: 18rem;">
	<div class="card-body">
		<h5 class="card-title">カードのタイトル</h5>
		<h6 class="card-subtitle mb-2 text-muted">カードのサブタイトル</h6>
		<p class="card-text">カードのタイトルに基づいて、カードのコンテンツの大部分を占める簡単なサンプルテキスト。</p>
		<a href="#" class="card-link">リンク1</a>
		<a href="#" class="card-link">リンク2</a>
	</div>
</div>

【設定】

コンテンツにカードのタイトルを付ける場合は div.card-body > h*.card-title
コンテンツにカードのサブタイトルを付ける場合は div.card-body > h*.card-subtitle.mb-2.text-muted
コンテンツにテキストを入れる場合は div.card-body > p.card-text
コンテンツにリンクを付ける場合は div.card-body > a.card-link

イメージ（Images）

.card-img-topは画像をカードの上に置く。.card-text では、テキストをカードに追加可能。.card-text 内のテキストは、デフォルトのHTMLタグでスタイルを設定可能。

見本

カードのタイトルに基づいて、カードのコンテンツの大部分を占める簡単なサンプルテキスト。

設定例

<div class="card" style="width: 18rem;">
	<img src="..." alt="カードの画像" class="card-img-top">
	<div class="card-body">
		<p class="card-text">カードのタイトルに基づいて、カードのコンテンツの大部分を占める簡単なサンプルテキスト。</p>
	</div>
</div>

【設定】

イメージを付ける場合は div.card > img.card-img(-{side})（.card-img(-{side}） の種類は画像の配置を参照）

リストグループ（List groups）

フラッシュリストグループを持つカード内のコンテンツのリストを作成。

1. 基本の設定

見本

アイテム1
アイテム2
アイテム3

設定例

<div class="card" style="width: 18rem;">
	<ul class="list-group list-group-flush">
		<li class="list-group-item">アイテム1</li>
		<li class="list-group-item">アイテム2</li>
		<li class="list-group-item">アイテム3</li>
	</ul>
</div>

2. ヘッダ付き v4.5.1スタイル変更

見本

カードのヘッダ

アイテム1
アイテム2
アイテム3

設定例

<div class="card" style="width: 18rem;">
	<div class="card-header">
		カードのヘッダ
	</div>
	<ul class="list-group list-group-flush">
		<li class="list-group-item">アイテム1</li>
		<li class="list-group-item">アイテム2</li>
		<li class="list-group-item">アイテム3</li>
	</ul>
</div>

3. ヘッダ付き v4.5.1スタイル変更

見本

アイテム1
アイテム2
アイテム3

カードのフッタ

設定例

<div class="card" style="width: 18rem;">
	<ul class="list-group list-group-flush">
		<li class="list-group-item">アイテム1</li>
		<li class="list-group-item">アイテム2</li>
		<li class="list-group-item">アイテム3</li>
	</ul>
	<div class="card-footer">
		カードのフッタ
	</div>
</div>

【設定】

リストグループを追加する場合は div.card > ul.list-group.list-group-flush ・・・（※リストグループ）

【変更履歴】

【v4.5.1】
- カードヘッダやカードフッタとリストの間が二重線になるバグが解消

引用（Blockquote）

カードのタイトルに基づいて、カードのコンテンツの大部分を占める簡単なサンプルテキスト。

blockquote要素に含まれるよく知られた引用。

引用元－Source Title

設定例

<div class="card">
	<div class="card-body">
		<p class="card-text">カードのタイトルに基づいて、カードのコンテンツの大部分を占める簡単なサンプルテキスト。</p>
		<blockquote class="blockquote mb-0">
			<p>blockquote要素に含まれるよく知られた引用。</p>
			<footer class="blockquote-footer">引用元－<cite title="Source Title">Source Title</cite></footer>
		</blockquote>
	</div>
</div>

【設定】

コンテンツに引用を付ける場合： div.card-body > blockquote.blockquote.mb-0（またはblockquote.card-body.blockquote.mb-0）

すべて投入（Kitchen sink）

必要なカードを作成するために複数のコンテンツタイプをミックスしたりマッチさせたり、そこにすべてを投げ込む。次に示すのは、画像スタイル、ブロック、テキストスタイルとリストグループをすべて固定幅のカードで囲んだもの。

見本

カードのタイトル

カードのタイトルに基づいて、カードのコンテンツの大部分を占める簡単なサンプルテキスト。

アイテム1
アイテム2
アイテム3

リンク1 リンク2

設定例

<div class="card" style="width: 18rem;">
	<img src="..." alt="カードの画像" class="card-img-top">
	<div class="card-body">
		<h5 class="card-title">カードのタイトル</h5>
		<p class="card-text">カードのタイトルに基づいて、カードのコンテンツの大部分を占める簡単なサンプルテキスト。</p>
	</div>
	<ul class="list-group list-group-flush">
		<li class="list-group-item">アイテム1</li>
		<li class="list-group-item">アイテム2</li>
		<li class="list-group-item">アイテム3</li>
	</ul>
	<div class="card-body">
		<a href="#" class="card-link">リンク1</a>
		<a href="#" class="card-link">リンク2</a>
	</div>
</div>

【設定】

イメージを付ける場合は div.card > img.card-img(-{side})（.card-img(-{side}） の種類は画像の配置を参照）
リストグループを追加する場合は div.card > ul.list-group.list-group-flush ・・・（※リストグループ）
コンテンツにカードのタイトルを付ける場合は div.card-body > h*.card-title
コンテンツにカードのサブタイトルを付ける場合は div.card-body > h*.card-subtitle.text-muted
コンテンツにテキストを入れる場合は div.card-body > p.card-text
コンテンツにリンクを付ける場合は div.card-body > a.card-link

ヘッダとフッタ（Header and footer）

カード内にオプションのヘッダやフッタを追加。

1. `div.card-header` で設定

見本

カードのヘッダ

カードのタイトル

以下のテキストを追加のコンテンツへの自然な導入としてサポート。

ボタン

設定例

<div class="card">
	<div class="card-header">
		カードのヘッダ
	</div>
	<div class="card-body">
		<h5 class="card-title">カードのタイトル</h5>
		<p class="card-text">以下のテキストを追加のコンテンツへの自然な導入としてサポート。</p>
		<a href="#" class="btn btn-primary">ボタン</a>
	</div>
</div>

<h *> 要素に .card-header を追加して、カードヘッダのスタイルが可能。

2. `h*.card-header` で設定

見本

カードのヘッダ

カードのタイトル

以下のテキストを追加のコンテンツへの自然な導入としてサポート。

ボタン

設定例

<div class="card">
	<h5 class="card-header">
		カードのヘッダ
	</h5>
	<div class="card-body">
		<h5 class="card-title">カードのタイトル</h5>
		<p class="card-text">以下のテキストを追加のコンテンツへの自然な導入としてサポート。</p>
		<a href="#" class="btn btn-primary">ボタン</a>
	</div>
</div>

3. 引用でのヘッダ

見本

引用

blockquote要素に含まれるよく知られた引用。

引用元－Source Title

設定例

<div class="card">
	<div class="card-header">
		引用
	</div>
	<div class="card-body">
		<blockquote class="blockquote mb-0">
			<p>blockquote要素に含まれるよく知られた引用。</p>
			<footer class="blockquote-footer">引用元－<cite title="Source Title">Source Title</cite></footer>
		</blockquote>
	</div>
</div>

4. フッタをつけて中央揃え

見本

カードのヘッダ

カードのタイトル

以下のテキストを追加のコンテンツへの自然な導入としてサポート。

ボタン

カードのフッタ

設定例

<div class="card text-center">
	<div class="card-header">
		カードのヘッダ
	</div>
	<div class="card-body">
		<h5 class="card-title">カードのタイトル</h5>
		<p class="card-text">以下のテキストを追加のコンテンツへの自然な導入としてサポート。</p>
		<a href="#" class="btn btn-primary">ボタン</a>
	</div>
	<div class="card-footer text-muted">
		カードのフッタ
	</div>
</div>

【設定】

ヘッダの場合： div.card > .card-header
目的の外観に応じて、見出しの要素やクラス（<h3>, .h3 など）や太字の要素やクラス（<strong>, <b>, .font-weight-bold など）でも使用可能。
フッタの場合： div.card > .card-footer.text-muted

カードの幅サイズ（Sizing）

カードは特定の幅がないと仮定しているので、特に明記しない限り、幅は100%になる。カスタムCSS、グリッドクラス、グリッドSass mixin、ユーティリティを使用して、必要に応じてこれを変更可能。

グリッドマークアップの使用（Using grid markup）

グリッドを使用して、必要に応じて列と行でカードを囲む。

見本

カードのタイトル

以下のテキストを追加のコンテンツへの自然な導入としてサポート。

ボタン

カードのタイトル

以下のテキストを追加のコンテンツへの自然な導入としてサポート。

ボタン

設定例

<div class="row">
	<div class="col-sm-6">
		<div class="card card-body">
			<h5 class="card-title">カードのタイトル</h5>
			<p class="card-text">以下のテキストを追加のコンテンツへの自然な導入としてサポート。</p>
			<a href="#" class="btn btn-primary">ボタン</a>
		</div>
	</div>
	<div class="col-sm-6">
		<div class="card card-body">
			<h5 class="card-title">カードのタイトル</h5>
			<p class="card-text">以下のテキストを追加のコンテンツへの自然な導入としてサポート。</p>
			<a href="#" class="btn btn-primary">ボタン</a>
		</div>
	</div>
</div>

【設定】

div.row > div.col(-{breakpoint})-* > div.card

ユーティリティの使用（Using utilities）

使用可能なサイズユーティリティを使用して、カードの幅をすばやく設定可能。

見本

●75%の幅で表示

カードのタイトル

以下のテキストを追加のコンテンツへの自然な導入としてサポート。

ボタン

●50%の幅で表示

カードのタイトル

以下のテキストを追加のコンテンツへの自然な導入としてサポート。

ボタン

設定例

75%の幅で表示<div class="card w-75">
	<div class="card-body">
		<h5 class="card-title">カードのタイトル</h5>
		<p class="card-text">以下のテキストを追加のコンテンツへの自然な導入としてサポート。</p>
		<a href="#" class="btn btn-primary">ボタン</a>
	</div>
</div>

50%の幅で表示<div class="card w-50">
	<div class="card-body">
		<h5 class="card-title">カードのタイトル</h5>
		<p class="card-text">以下のテキストを追加のコンテンツへの自然な導入としてサポート。</p>
		<a href="#" class="btn btn-primary">ボタン</a>
	</div>
</div>

【設定】

div.card に .w-{%} を追加（.w-{%} は幅の設定クラスから選択）

カスタムCSSの使用（Using custom CSS）

見本

カードのタイトル

以下のテキストを追加のコンテンツへの自然な導入としてサポート。

ボタン

設定例

<div class="card card-body" style="width: 18rem;">
	<h5 class="card-title">カードのタイトル</h5>
	<p class="card-text">以下のテキストを追加のコンテンツへの自然な導入としてサポート。</p>
	<a href="#" class="btn btn-primary">ボタン</a>
</div>

【設定】

div.card に width を指定（サイズは rem 単位が望ましい）

テキストの配置（Text alignment）

テキスト配置クラスを使用して、カード全体か特定の部分のテキスト配置が素早く変更可能。

見本

●左寄せの場合（デフォルト）

カードのタイトル

以下のテキストを追加のコンテンツへの自然な導入としてサポート。

ボタン

●中央揃えの場合

カードのタイトル

以下のテキストを追加のコンテンツへの自然な導入としてサポート。

ボタン

●右寄せの場合

カードのタイトル

以下のテキストを追加のコンテンツへの自然な導入としてサポート。

ボタン

設定例

左寄せの場合（デフォルト）<div class="card card-body" style="width: 18rem;">
	<h5 class="card-title">カードのタイトル</h5>
	<p class="card-text">以下のテキストを追加のコンテンツへの自然な導入としてサポート。</p>
	<a href="#" class="btn btn-primary">ボタン</a>
</div>

中央揃えの場合<div class="card card-body text-center" style="width: 18rem;">
	<h5 class="card-title">カードのタイトル</h5>
	<p class="card-text">以下のテキストを追加のコンテンツへの自然な導入としてサポート。</p>
	<a href="#" class="btn btn-primary">ボタン</a>
</div>

右寄せの場合<div class="card card-body text-right" style="width: 18rem;">
	<h5 class="card-title">カードのタイトル</h5>
	<p class="card-text">以下のテキストを追加のコンテンツへの自然な導入としてサポート。</p>
	<a href="#" class="btn btn-primary">ボタン</a>
</div>

【設定】

中央揃えの場合： div.card に .text(-{breakpoint})-center を追加（追加するクラスは文字の中央揃えクラスを参照）

右寄せの場合： div.card に .text(-{breakpoint})-right を追加（追加するクラスは文字の右寄せクラスを参照）

Bootstrapのナビゲーションコンポーネントを使用して、カードのヘッダ（またはブロック）にナビゲーションを追加。

1. タブナビゲーションの場合

見本

カードのタイトル

以下のテキストを追加のコンテンツへの自然な導入としてサポート。

登録する

設定例（v4.6.1～）

<div class="card text-center">
	<div class="card-header">
		<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 disabled">無効</a>
			</li>
		</ul>
	</div>
	<div class="card-body">
		<h5 class="card-title">カードのタイトル</h5>
		<p class="card-text">以下のテキストを追加のコンテンツへの自然な導入としてサポート。</p>
		<a href="#" class="btn btn-primary">登録する</a>
	</div>
</div>

2. ピルナビゲーションの場合

見本

カードのタイトル

以下のテキストを追加のコンテンツへの自然な導入としてサポート。

登録する

設定例（v4.6.1～）

<div class="card text-center">
	<div class="card-header">
		<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 disabled">無効</a>
			</li>
		</ul>
	</div>
	<div class="card-body">
		<h5 class="card-title">カードのタイトル</h5>
		<p class="card-text">以下のテキストを追加のコンテンツへの自然な導入としてサポート。</p>
		<a href="#" class="btn btn-primary">登録する</a>
	</div>
</div>

【設定】

タブナビゲーションの場合：div.card > div.card-header > ul.nav.nav-tabs.card-header-tabs > li.nav-item > a.nav-link
ピルナビゲーションの場合：div.card > div.card-header > ul.nav.nav-pills.card-header-pills > li.nav-item > a.nav-link
【2018/12/06修正】.card-header-tabs ⇒ .card-header-pills

【変更履歴】

【v4.2.1】
- .disabled 関連のアクセシビリティの設定を追加
【v4.6.1】
- ナビリンクが無効の場合（a.nav-link.disabled）：href 属性、tabindex="-1"（リンクにキーボードフォーカスを受け取らないようにする）、aria-disabled="true"（支援技術に要素が無効の状態であることを伝える）の設定が不要に

イメージ（Images）

カードには画像を扱うためのオプションがいくつか存在。カードの両端に「イメージキャップ」を追加したり、イメージにカードの内容を重ねたり、イメージをカードに埋め込んだりすることが可能。

画像の配置（Image caps）

ヘッダとフッタと同様に、カードには上部と下部に「イメージキャップ」（カードの上部か下部の画像）が表示される。

見本

●カードの上部に配置 .card-img-top

カードのタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

最終更新3分前

●カードの下部に配置 .card-img-bottom

カードのタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

最終更新3分前

●画像のみの場合 .card-img

設定例

カードの上部に配置<div class="card">
	<img class="card-img-top" src="..." alt="カードの画像">
	<div class="card-body">
		<h5 class="card-title">カードのタイトル</h5>
		<p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。</p>
		<p class="card-text"><small class="text-muted">最終更新3分前</small></p>
	</div>
</div>

カードの下部に配置<div class="card">
	<div class="card-body">
		<h5 class="card-title">カードのタイトル</h5>
		<p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。</p>
		<p class="card-text"><small class="text-muted">最終更新3分前</small></p>
	</div>
	<img class="card-img-bottom" src="..." alt="カードの画像">
</div>

画像のみの場合<div class="card">
	<img class="card-img" src="..." alt="カードの画像">
</div>

【設定】

上部に配置： img.card-img-top
下部に配置： img.card-img-bottom
画像のみの場合： img.card-img

画像のオーバーレイ（Image overlays）

画像をカードの背景に変え、カードのテキストを重ね合わせる。イメージによっては、追加のスタイルやユーティリティが必要な場合とそうでない場合がある。

見本

カードのタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

最終更新3分前

設定例

<div class="card bg-dark text-white">
	<img src="..." alt="カードの画像" class="card-img">
	<div class="card-img-overlay">
		<h5 class="card-title">カードのタイトル</h5>
		<p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。</p>
		<p class="card-text"><small>最終更新3分前</small></p>
	</div>
</div>

【設定】

div.card　> [img.card-img《画像》 + div.card-img-overlay《コンテンツ》]

コンテンツは画像の高さより大きくしないこと。コンテンツが画像より大きい場合、コンテンツは画像の外に表示される。

水平スタイル（Horizontal）v4.3.0設定追加

グリッドとユーティリティクラスの組み合わせを使用して、モバイルフレンドリーでレスポンシブな方法でカードを水平にすることが可能。次の実例では、.no-gutters でグリッドの左右のガターを取り除き、.col-md-* クラスを使って中サイズ（md）のブレークポイントでカードを水平にする。カードの内容によっては、さらに調整が必要な場合がある。

見本

カードのタイトル

これは、追加のコンテンツへの自然な引き込みとして、下のテキストをサポートする幅の広いカード。このコンテンツはもう少し長くなってもよい。

最終更新3分前

設定例

<div class="card mb-3" style="max-width: 540px;">
	<div class="row no-gutters">
		<div class="col-md-4">
			<img src="..." alt="..." class="card-img">
		</div>
		<div class="col-md-8">
			<div class="card-body">
				<h5 class="card-title">カードのタイトル</h5>
				<p class="card-text">...</p>
				<p class="card-text"><small class="text-muted">最終更新3分前</small></p>
			</div>
		</div>
	</div>
</div>

【設定】

div.card > div.row.no-gutters > div.col(-{breakpoint})-*

カードスタイル（Card styles）

カードには、背景、罫線、色をカスタマイズするための様々なオプションがある。

カードの背景と色（Background and color）

カラーユーティリティを使用して、カードの外観を変更する。

背景色の種類

●Primary:.bg-primary.text-white

ヘッダ

Primaryカードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

●Secondary:.bg-secondary.text-white

ヘッダ

Secondaryカードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

●Success：.bg-success.text-white

ヘッダ

Successryカードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

●Info:.bg-info.text-white

ヘッダ

Infoカードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

●Warning：.bg-warning

ヘッダ

Warningカードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

●Danger：.bg-danger.text-white

ヘッダ

Dangerカードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

●Light：.bg-light

ヘッダ

Lightカードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

●Dark：.bg-dark.text-white

ヘッダ

Darkカードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

※設定なし（参考）

ヘッダ

カードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

設定例

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
	<div class="card-header">Primaryヘッダ</div>
	<div class="card-body">
		<h5 class="card-title">カードタイトル</h5>
		<p class="card-text">カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。</p>
	</div>
</div>

【設定】

div.card に .bg-{themecolor}（上記の「背景色の種類」から選択）を追加（その場合で白文字にするには .text-white を追加）

支援技術にカラー名の意味を伝えること

カラー名を使用して意味を追加すれば視覚的な指示が提供されるが、これはスクリーンリーダーなどの支援技術のユーザーには伝わらない。カラー名で示される情報がコンテンツ自体（可視テキストなど）から明らかであるか、または .sr-only クラスで隠された追加のテキストなどの代替手段を入れるようにすること。

カードの枠線の色（Border）

境界ユーティリティを使用して、カードの枠線の色のみを変更。.text-{color} クラスは親の .card かカードの内容のサブセットに以下のように置くことが可能。

枠線の色の種類

●Primary:.border-primary

ヘッダ

Primaryカードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

●Secondary:.border-secondary

ヘッダ

Secondaryカードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

●Success：.border-success

ヘッダ

Successryカードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

●Info:.border-info

ヘッダ

Infoカードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

●Warning：.border-warning

ヘッダ

Warningカードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

●Danger：.border-danger

ヘッダ

Dangerカードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

●Light：.border-light

ヘッダ

Lightカードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

●Dark：.border-dark

ヘッダ

Darkカードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

設定例

<div class="card border-primary mb-3" style="max-width: 18rem;">
	<div class="card-header">ヘッダ</div>
	<div class="card-body text-primary">
		<h5 class="card-title">Primaryカードタイトル</h5>
		<p class="card-text">カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。</p>
	</div>
</div>

【設定】

div.card に .border-{themecolor}（上記の「枠線の色の種類」から選択）を追加

mixinユーティリティ（Mixins utilities）

また、必要に応じてカードのヘッダとフッタの枠線を変更し、背景色を .bg-transparent で削除することも可能。

見本

ヘッダ

Successカードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

フッタ

※ヘッダとフッタに .bg-transparent を入れない場合（参考）

ヘッダ

Successカードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

フッタ

●裏技1：背景と枠で色を変える：.border-{themecolor}.bg-{themecolor}

ヘッダ

カードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

フッタ

●裏技2：ヘッダとフッタのみ背景色

ヘッダ

カードタイトル

カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。

フッタ

設定例

<div class="card border-success mb-3" style="max-width: 18rem;">
	<div class="card-header bg-transparent border-success">ヘッダ</div>
	<div class="card-body text-success">
		<h5 class="card-title">Successカードタイトル</h5>
		<p class="card-text">カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。</p>
	</div>
	<div class="card-footer bg-transparent border-success">フッタ</div>
</div>

※裏技1：背景と枠で色を変える<div class="card border-danger text-white bg-warning mb-3" style="max-width: 18rem;">
	<div class="card-header border-danger">ヘッダ</div>
	<div class="card-body">
		<h5 class="card-title">カードタイトル</h5>
		<p class="card-text">カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。</p>
	</div>
	<div class="card-footer border-danger">フッタ</div>
</div>

※裏技2：ヘッダとフッタのみ背景色<div class="card border-primary mb-3" style="max-width: 18rem;">
	<div class="card-header text-white bg-primary border-primary">ヘッダ</div>
	<div class="card-body text-primary">
		<h5 class="card-title">カードタイトル</h5>
		<p class="card-text">カードのタイトルに基づいてカードの内容の大部分を占める簡単なサンプルテキスト。</p>
	</div>
	<div class="card-footer text-white bg-primary border-primary">フッタ</div>
</div>

【設定】

ヘッダやフッタにも枠線の色を設定する場合は、div.card に .border-{themecolor} を追加して（.card-body に .border-{themecolor} を追加しても無効）、.card-header や .card-footer に .bg-{themecolor} を追加
ヘッダやフッタのデフォルトの背景色を消したい場合は、.card-header や .card-footer に .bg-transparent を追加
ヘッダやフッタのみ背景色を設定する場合は、.card-header や .card-footer に .bg-{themecolor} を追加

カードレイアウト（Card layout）

Bootstrapには、カード内のコンテンツのスタイルに加えて、一連のカードをレイアウトするためのオプションがいくつか組み込まれている。当分の間、これらのレイアウトオプションはまだレスポンシブには対応せず。

カードグループ（Card groups）

カードグループを使用して、等しい幅と高さの列を持つ単一の添付要素としてカードをレンダリング。カードグループは極小のビューポートでは縦に積み重ねられた状態で表示されるが、sm（小）ブレークポイントからは display：fixed; を使用して均一なサイズで結合される。

見本

カード1のタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

最終更新3分前

カード2のタイトル

このカードには、追加のコンテンツへの自然な導入として以下のサポートテキストがあります。

最終更新3分前

カード3のタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このカードは、同じ高さのアクションを示す最初のものよりも長いコンテンツを持っています。

最終更新3分前

設定例

<div class="card-group">
	<div class="card">
		<img src="..." alt="カード1の画像" class="card-img-top">
		<div class="card-body">
			<h5 class="card-title">カード1のタイトル</h5>
			<p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。</p>
			<p class="card-text"><small class="text-muted">最終更新3分前</small></p>
		</div>
	</div>
	<div class="card">
		<img src="..." alt="カード2の画像" class="card-img-top">
		<div class="card-body">
			<h5 class="card-title">カード2のタイトル</h5>
			<p class="card-text">このカードには、追加のコンテンツへの自然な導入として以下のサポートテキストがあります。</p>
			<p class="card-text"><small class="text-muted">最終更新3分前</small></p>
		</div>
	</div>
	<div class="card">
		<img src="..." alt="カード3の画像" class="card-img-top">
		<div class="card-body">
			<h5 class="card-title">カード3のタイトル</h5>
			<p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。 このカードは、同じ高さのアクションを示す最初のものよりも長いコンテンツを持っています。</p>
			<p class="card-text"><small class="text-muted">最終更新3分前</small></p>
		</div>
	</div>
</div>

カードグループでフッタを使用すると、その内容が自動的に整列。

見本

カード1のタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

最終更新3分前

カード2のタイトル

このカードには、追加のコンテンツへの自然な導入として以下のサポートテキストがあります。

最終更新3分前

カード3のタイトル

最終更新3分前

設定例

<div class="card-group">
	<div class="card">
		<img src="..." alt="カード1の画像" class="card-img-top">
		<div class="card-body">
			<h5 class="card-title">カード1のタイトル</h5>
			<p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。</p>
		</div>
		<div class="card-footer">
			<small class="text-muted">最終更新3分前</small>
		</div>
	</div>
	<div class="card">
		<img src="..." alt="カード2の画像" class="card-img-top">
		<div class="card-body">
			<h5 class="card-title">カード2のタイトル</h5>
			<p class="card-text">このカードには、追加のコンテンツへの自然な導入として以下のサポートテキストがあります。</p>
		</div>
		<div class="card-footer">
			<small class="text-muted">最終更新3分前</small>
		</div>
	</div>
	<div class="card">
		<img src="..." alt="カード3の画像" class="card-img-top">
		<div class="card-body">
			<h5 class="card-title">カード3のタイトル</h5>
			<p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。 このカードは、同じ高さのアクションを示す最初のものよりも長いコンテンツを持っています。</p>
		</div>
		<div class="card-footer">
			<small class="text-muted">最終更新3分前</small>
		</div>
	</div>
</div>

【設定】

div.card-group > 複数の div.card

カードデッキ（Card decks）

お互い接触しない幅と高さの等しいカードが必要なら、カードデッキを使用すること。

※小のビューポート以上で適用。

見本

カード1のタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

最終更新3分前

カード2のタイトル

このカードには、追加のコンテンツへの自然な導入として以下のサポートテキストがあります。

最終更新3分前

カード3のタイトル

最終更新3分前

設定例

<div class="card-deck">
	<div class="card">
		<img src="..." alt="カード1の画像" class="card-img-top">
		<div class="card-body">
			<h5 class="card-title">カード1のタイトル</h5>
			<p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。</p>
			<p class="card-text"><small class="text-muted">最終更新3分前</small></p>
		</div>
	</div>
	<div class="card">
		<img src="..." alt="カード2の画像" class="card-img-top">
		<div class="card-body">
			<h5 class="card-title">カード2のタイトル</h5>
			<p class="card-text">このカードには、追加のコンテンツへの自然な導入として以下のサポートテキストがあります。</p>
			<p class="card-text"><small class="text-muted">最終更新3分前</small></p>
		</div>
	</div>
	<div class="card">
		<img src="..." alt="カード3の画像" class="card-img-top">
		<div class="card-body">
			<h5 class="card-title">カード3のタイトル</h5>
			<p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。 このカードは、同じ高さのアクションを示す最初のものよりも長いコンテンツを持っています。</p>
			<p class="card-text"><small class="text-muted">最終更新3分前</small></p>
		</div>
	</div>
</div>

カードグループと同様に、デッキ内のカードフッタも自動的に整列。

見本

カード1のタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

最終更新3分前

カード2のタイトル

このカードには、追加のコンテンツへの自然な導入として以下のサポートテキストがあります。

最終更新3分前

カード3のタイトル

最終更新3分前

設定例

<div class="card-deck">
	<div class="card">
		<img src="..." alt="カード1の画像" class="card-img-top">
		<div class="card-body">
			<h5 class="card-title">カード1のタイトル</h5>
			<p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。</p>
		</div>
		<div class="card-footer">
			<small class="text-muted">最終更新3分前</small>
		</div>
	</div>
	<div class="card">
		<img src="..." alt="カード2の画像" class="card-img-top">
		<div class="card-body">
			<h5 class="card-title">カード2のタイトル</h5>
			<p class="card-text">このカードには、追加のコンテンツへの自然な導入として以下のサポートテキストがあります。</p>
		</div>
		<div class="card-footer">
			<small class="text-muted">最終更新3分前</small>
		</div>
	</div>
	<div class="card">
		<img src="..." alt="カード3の画像" class="card-img-top">
		<div class="card-body">
			<h5 class="card-title">カード3のタイトル</h5>
			<p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。 このカードは、同じ高さのアクションを示す最初のものよりも長いコンテンツを持っています。</p>
		</div>
		<div class="card-footer">
			<small class="text-muted">最終更新3分前</small>
		</div>
	</div>
</div>

【設定】

div.card-deck > 複数の div.card

グリッドカード（Grid cards）v4.4.0新設

Bootstrapグリッドシステムと.rol-cols クラスを使用して、1行に表示する（カードを囲む）グリッド列の数を制御。例えば、ここでは、.row-cols-1 で1列に1カードをレイアウトし、中のビューポートのブレークポイントからは .row-cols-md-2 で4つのカードを複数の行にわたって等幅に分割。

見本

カードのタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

カードのタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

カードのタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

カードのタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

設定例

<div class="row row-cols-1 row-cols-md-2">
	<div class="col mb-4">
		<div class="card">
			<img src="..." alt="..." class="card-img-top">
			<div class="card-body">
				<h5 class="card-title">カードのタイトル</h5>
				<p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。</p>
			</div>
		</div>
	</div>
	<div class="col mb-4">
		<div class="card">
			<img src="..." alt="..." class="card-img-top">
			<div class="card-body">
				<h5 class="card-title">カードのタイトル</h5>
				<p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。</p>
			</div>
		</div>
	</div>
	<div class="col mb-4">
		<div class="card">
			<img src="..." alt="..." class="card-img-top">
			<div class="card-body">
				<h5 class="card-title">カードのタイトル</h5>
				<p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。</p>
			</div>
		</div>
	</div>
	<div class="col mb-4">
		<div class="card">
			<img src="..." alt="..." class="card-img-top">
			<div class="card-body">
				<h5 class="card-title">カードのタイトル</h5>
				<p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。</p>
			</div>
		</div>
	</div>
</div>

.row-cols-2 を .row-cols-3 に変更すると、4枚目のカードが折り返される。

見本

カードのタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

カードのタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

カードのタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

カードのタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

設定例

<div class="row row-cols-1 row-cols-md-3">
	<div class="col mb-4">
		<div class="card">
			<img src="..." alt="..." class="card-img-top">
			<div class="card-body">
				<h5 class="card-title">カードのタイトル</h5>
				<p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。</p>
			</div>
		</div>
	</div>
	<div class="col mb-4">
		<div class="card">
			<img src="..." alt="..." class="card-img-top">
			<div class="card-body">
				<h5 class="card-title">カードのタイトル</h5>
				<p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。</p>
			</div>
		</div>
	</div>
	<div class="col mb-4">
		<div class="card">
			<img src="..." alt="..." class="card-img-top">
			<div class="card-body">
				<h5 class="card-title">カードのタイトル</h5>
				<p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。</p>
			</div>
		</div>
	</div>
	<div class="col mb-4">
		<div class="card">
			<img src="..." alt="..." class="card-img-top">
			<div class="card-body">
				<h5 class="card-title">カードのタイトル</h5>
				<p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。</p>
			</div>
		</div>
	</div>
</div>

高さを揃えたいときは、カードに .h-100 を追加する。

見本

カードのタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

カードのタイトル

これは短いカードです。

カードのタイトル

これは、追加コンテンツへの自然な引き込みとして、以下のテキストをサポートする長いカードです。

カードのタイトル

これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。

設定例

<div class="row row-cols-1 row-cols-md-3">
	<div class="col mb-4">
		<div class="card h-100">
			<img src="..." alt="..." class="card-img-top">
			<div class="card-body">
				<h5 class="card-title">カードのタイトル</h5>
				<p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。</p>
			</div>
		</div>
	</div>
	<div class="col mb-4">
		<div class="card h-100">
			<img src="..." alt="..." class="card-img-top">
			<div class="card-body">
				<h5 class="card-title">カードのタイトル</h5>
				<p class="card-text">これは短いカードです。</p>
			</div>
		</div>
	</div>
	<div class="col mb-4">
		<div class="card h-100">
			<img src="..." alt="..." class="card-img-top">
			<div class="card-body">
				<h5 class="card-title">カードのタイトル</h5>
				<p class="card-text">これは、追加コンテンツへの自然な引き込みとして、以下のテキストをサポートする長いカードです。</p>
			</div>
		</div>
	</div>
	<div class="col mb-4">
		<div class="card h-100">
			<img src="..." alt="..." class="card-img-top">
			<div class="card-body">
				<h5 class="card-title">カードのタイトル</h5>
				<p class="card-text">これは、追加コンテンツへの自然な導入として以下のテキストをサポートする、より幅広いカードです。このコンテンツはもう少し長くなります。</p>
			</div>
		</div>
	</div>
</div>

【設定】

div.row.row-cols(-{breakpoint})-* > div.col > div.card
.row-cols(-{breakpoint})-* はグリッドの行列グリッドクラスから選択
各カードの高さを揃えたい場合は、div.card に .h-100 を追加

カードカラム（Card columns）

カードは、CSSだけでMasonryのような列のカード化が可能。Flexboxの代わりにCSSの列プロパティを使用してカードを構築すると、整列が容易になる。カードは、上から下、左から右の順に並べられている。

※小のビューポート以上で適用。

注意喚起！ カードの列の距離が異なる場合がある。カード間でカードが壊れるのを防ぐには、column-break-inside：avoid では問題ない対策とは言えないので、display：inline-block に設定する必要がある。

見本

新しい行に折り返さないカード1のタイトル

これは、追加のコンテンツへの自然な導入として以下のテキストをサポートする長いカードです。このコンテンツはもう少し長くなります。

カード2：blockquote要素に含まれるよく知られた引用。

引用元－Source Title

カード3のタイトル

このカードには、追加のコンテンツへの自然な導入として下にサポートテキストを入れています。

最終更新3分前

カード4：blockquote要素に含まれるよく知られた引用。

引用元－Source Title

カード5のタイトル

このカードには、通常のタイトルとその下にテキストの短い段落を入れています。

最終更新3分前

カード7：blockquote要素に含まれるよく知られた引用。

引用元－Source Title

カード8のタイトル

これはタイトルとその下にサポートテキストを持つもう一つのカード。このカードには、全体的にわずかに背を高くするための追加コンテンツを入れています。

最終更新3分前

設定例

<div class="card-columns">
	<div class="card">
		<img src="..." alt="カード1の画像" class="card-img-top">
		<div class="card-body">
			<h5 class="card-title">新しい行に折り返さないカード1のタイトル</h5>
			<p class="card-text">これは、追加のコンテンツへの自然な導入として以下のテキストをサポートする長いカードです。このコンテンツはもう少し長くなります。</p>
		</div>
	</div>
	<div class="card p-3">
		<blockquote class="blockquote mb-0">
			<p>カード2：blockquote要素に含まれるよく知られた引用。</p>
			<footer class="blockquote-footer">
				<small class="text-muted">
					引用元－<cite title="Source Title">Source Title</cite>
				</small>
			</footer>
		</blockquote>
	</div>
	<div class="card">
		<img src="..." alt="カード3の画像" class="card-img-top">
		<div class="card-body">
			<h5 class="card-title">カード3のタイトル</h5>
			<p class="card-text">追加のコンテンツへの自然な導入として下にサポートテキストを入れています。</p>
			<p class="card-text"><small class="text-muted">最終更新3分前</small></p>
		</div>
	</div>
	<div class="card text-white bg-primary text-center p-3">
		<blockquote class="blockquote mb-0">
			<p>カード4：blockquote要素に含まれるよく知られた引用。</p>
			<footer class="blockquote-footer text-white">
				<small>
					引用元－<cite title="Source Title">Source Title</cite>
				</small>
			</footer>
		</blockquote>
	</div>
	<div class="card text-center">
		<div class="card-body">
			<h5 class="card-title">カード5のタイトル</h5>
			<p class="card-text">このカードには、通常のタイトルとその下にテキストの短い段落がある。</p>
			<p class="card-text"><small class="text-muted">最終更新3分前</small></p>
		</div>
	</div>
	<div class="card">
		<img src="..." alt="カード6の画像" class="card-img">
	</div>
	<div class="card text-right p-3">
		<blockquote class="blockquote mb-0">
			<p>カード7：blockquote要素に含まれるよく知られた引用。</p>
			<footer class="blockquote-footer">
				<small class="text-muted">
					引用元－<cite title="Source Title">Source Title</cite>
				</small>
			</footer>
		</blockquote>
	</div>
	<div class="card">
		<div class="card-body">
			<h5 class="card-title">カード8のタイトル</h5>
			<p class="card-text">これはタイトルとその下にサポートテキストを持つもう一つのカード。このカードには、全体的にわずかに背を高くするための追加コンテンツを入れています。</p>
			<p class="card-text"><small class="text-muted">最終更新3分前</small></p>
		</div>
	</div>
</div>

【設定】

複数のカードを div.card-columns でまとめる

【注意】

デフォルトではカード列の数は"3"に設定されている

カード列は、いくつかの追加コードで拡張およびカスタマイズも可能。下記は、CSSの列と同じCSSを使用して .card-columns クラスを拡張したもので、列数を変更して一連のレスポンシブ階層を生成するように設定。

設定例

Sass.card-columns {
	@include media-breakpoint-only(lg) {
		column-count: 4;
	}
	@include media-breakpoint-only(xl) {
		column-count: 5;
	}
}

カード（Cards） v4.0.0新設

概要（About）

基本のカードの設定（Example）

見本

カードのタイトル

設定例

v3のコンポーネントとの変更箇所

1. サムネイルの設定との変更箇所

見本

Bootstrap3.xの設定例 赤背景が変更箇所

Bootstrap4.xの設定例 緑背景が変更箇所

2. コンテンツ付きサムネイルとの変更箇所

見本

タイトル

タイトル

タイトル

タイトル

Bootstrap3.xの設定例 赤背景が変更箇所

Bootstrap4.xの設定例 緑背景が変更箇所

3. ヘッダ/フッタ付きパネルとの変更箇所

見本

ヘッダのタイトル

Bootstrap3.xの設定例 赤背景が変更箇所

Bootstrap4.xの設定例 緑背景が変更箇所

4. テーブル付きパネルとの変更箇所

見本

Bootstrap3.xの設定例 赤背景が変更箇所

Bootstrap4.xの設定例 緑背景が変更箇所

5. リストグループ付きパネルとの変更箇所

見本

Bootstrap3.xの設定例 赤背景が変更箇所

Bootstrap4.xの設定例 緑背景が変更箇所

6. 囲み枠の設定との変更箇所

見本

Bootstrap3.xの設定例 赤背景が変更箇所

Bootstrap4.xの設定例 緑背景が変更箇所

7. 囲み枠のサイズとの変更箇所

見本

Bootstrap3.xの設定例 赤背景が変更箇所

Bootstrap4.xの設定例 緑背景が変更箇所

コンテンツタイプ（Content types）

ボディ（Body）

見本

設定例

タイトル、テキスト、リンク（Titles, text, and links）

見本

カードのタイトル

カードのサブタイトル

設定例

イメージ（Images）

見本

設定例

リストグループ（List groups）

1. 基本の設定

見本

設定例

2. ヘッダ付き v4.5.1スタイル変更

見本

設定例

3. ヘッダ付き v4.5.1スタイル変更

見本

設定例

引用（Blockquote）

設定例

すべて投入（Kitchen sink）

見本

カードのタイトル

設定例

ヘッダとフッタ（Header and footer）

1. div.card-header で設定

見本

カードのタイトル

設定例

2. h*.card-header で設定

見本

カードのヘッダ

カードのタイトル

設定例

3. 引用でのヘッダ

見本

Bootstrap3.xの設定例赤背景が変更箇所

Bootstrap4.xの設定例緑背景が変更箇所

Bootstrap3.xの設定例赤背景が変更箇所

Bootstrap4.xの設定例緑背景が変更箇所

Bootstrap3.xの設定例赤背景が変更箇所

Bootstrap4.xの設定例緑背景が変更箇所

Bootstrap3.xの設定例赤背景が変更箇所

Bootstrap4.xの設定例緑背景が変更箇所

Bootstrap3.xの設定例赤背景が変更箇所

Bootstrap4.xの設定例緑背景が変更箇所

Bootstrap3.xの設定例赤背景が変更箇所

Bootstrap4.xの設定例緑背景が変更箇所

Bootstrap3.xの設定例赤背景が変更箇所

Bootstrap4.xの設定例緑背景が変更箇所

1. `div.card-header` で設定

2. `h*.card-header` で設定