カード（Cards）

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

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。

このページの項目

概要（About）

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

このページでは、一部を除いて各実例の .card に、任意に style="width: **rem;" か style="max-width: **rem;" の設定を追加している。

基本のカードの設定（Example）v5.2.0デザイン変更

カードはできるだけ少ないマークアップとスタイルで構築されるが、それでも大量の制御とカスタマイズを実現。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 > コンテンツ（以下のコンテンツタイプに記載）

【変更履歴】

【v5.2.0】
- border-radius の値を調整したので、若干丸みを帯びたデザインに変更

コンテンツタイプ（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）v5.3.0設定変更

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

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

見本

カードのタイトル

カードのサブタイトル

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

リンク1 リンク2

Bootstrap5.3.0の設定例緑背景が変更箇所

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

※Bootstrap5.2.xの設定例赤背景が変更箇所

<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-body-secondary
コンテンツにテキストを入れる場合：div.card-body > p.card-text
コンテンツに複数のリンクを横並びにする場合：div.card-body > a.card-link + a.card-link

【変更履歴】

【v5.3.0】
- サブタイトル：.text-muted は非推奨になったので .text-body-secondary に変更

イメージ（Images）

.card-img-top と .card-img-bottom は、それぞれカードの枠の罫線に合わせて上下の角を丸く設定する。.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. ヘッダ付き

見本

カードのヘッダ

アイテム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. フッタ付き

見本

アイテム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 ・・・（※リストグループ）

引用（Blockquote）v5.0.0-alpha1設定変更

見本

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

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

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

<div class="card">
  <div class="card-body">
    <p class="card-text">カードのタイトルに基づいて、カードのコンテンツの大部分を占める簡単なサンプルテキスト。</p>
    <figure class="mb-0">
      <blockquote class="blockquote">
        <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
      </blockquote>
      <figcaption class="blockquote-footer mb-0">引用元－<cite title="Source Title">Source Title</cite></figcaption>
    </figure>
  </div>
</div>

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

<div class="card">
  <div class="card-body">
    <p class="card-text">カードのタイトルに基づいて、カードのコンテンツの大部分を占める簡単なサンプルテキスト。</p>
    <blockquote class="blockquote mb-0">
      <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
      <footer class="blockquote-footer">引用元－<cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

【設定】

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

【変更履歴】

【v5.0.0-alpha1】
- 引用文の設定を変更

すべて投入（Kitchen sink）

複数のコンテンツタイプを組み合わせて必要なカードを作成するか、そこにすべてを投入する。以下に示すのは、画像スタイル、ブロック、テキストスタイルとリストグループをすべて固定幅のカードで囲んだもの。

見本

カードのタイトル

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

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

リンク1 リンク2

設定例

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="カードの画像">
  <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-body-secondary
コンテンツにテキストを入れる場合は 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>

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

<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. 引用でのヘッダ v5.0.0-alpha1設定変更

見本

引用

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

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

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

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

<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. フッタをつけて中央揃えv5.3.0設定変更

見本

カードのヘッダ

カードのタイトル

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

ボタン

カードのフッタ

Bootstrap5.3.0の設定例緑背景が変更箇所

<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-body-secondary">
    カードのフッタ
  </div>
</div>

※Bootstrap5.2.xの設定例赤背景が変更箇所

<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>, .fw-bold）でも使用可能。
フッタの場合： div.card > .card-footer.text-body-secondary

【変更履歴】

【v5.0.0-alpha1】
- 引用文の設定を変更
【v5.3.0】
- フッタ：.text-muted は非推奨になったので .text-body-secondary に変更

カードの幅サイズ（Sizing）

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

グリッドマークアップの使用（Using grid markup）v5.3.0設定変更

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

見本

カードのタイトル

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

ボタン

カードのタイトル

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

ボタン

Bootstrap5.xの設定例緑背景が5.3.0での変更箇所

<div class="row">
  <div class="col-sm-6 mb-3 mb-sm-0">
    <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

【変更履歴】

【v5.3.0】
- カード間のマージンを追加

ユーティリティの使用（Using utilities）v5.3.0設定変更

使用できるサイズユーティリティを使用して、カードの幅を迅速に設定できる。

見本

75%の幅で表示

カードのタイトル

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

ボタン

50%の幅で表示

カードのタイトル

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

ボタン

設定例

75%の幅で表示<div class="card w-75 mb-3">
  <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-{value} を追加（.w-{value} は幅の設定クラスから選択）

【変更履歴】

【v5.3.0】
- カード間のマージンを追加

カスタム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）v5.3.0設定変更

文字の配置ユーティリティクラスを使用して、カード全体か特定の部分のテキスト配置が迅速に変更できる。

見本

行頭揃えの場合（デフォルト）

カードのタイトル

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

ボタン

中央揃えの場合

カードのタイトル

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

ボタン

行末揃えの場合

カードのタイトル

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

ボタン

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

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

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

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

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

行末揃えの場合<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})-end を追加（追加するクラスは文字の行末揃えクラスに記載）

【変更履歴】

【v5.0.0-beta1】
- RTL（右書き）の設定追加に伴いユーティリティのクラス名変更
  - 文字の行末揃え：.text(-{breakpoint})-right ⇒ .text(-{breakpoint})-end
【v5.3.0】
- カード間のマージンを追加

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

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

見本

カードのタイトル

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

登録する

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

<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" aria-current="true" href="#">アクティブ</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">リンク</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" aria-disabled="true">無効</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. ピルナビゲーションの場合

見本

カードのタイトル

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

登録する

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

<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" aria-current="true" href="#">アクティブ</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">リンク</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" aria-disabled="true">無効</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
card-header-tabs ⇒ card-header-pills

【アクセシビリティの設定】

アクティブ化の場合：.active と同じ要素に aria-current="true"（支援技術に現在のアイテムだと伝える）を入れる
ナビリンクが無効の場合：a.nav-link.disabled に aria-disabled="true"（支援技術に要素が無効の状態であることを伝える）を入れる

【変更履歴】

【v5.0.0-alpha1】
- .active 関連のアクセシビリティの設定を追加
【v5.1.1】
- ナビリンクが無効の場合（a.nav-link.disabled）：href 属性、tabindex="-1"（リンクにキーボードフォーカスを受け取らないようにする）、aria-disabled="true"（支援技術に要素が無効の状態だと伝える）の設定が不要に（v4.6.1でバックポート）
【v5.3.1】
- ナビリンクが無効の場合（a.nav-link.disabled）の 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-body-secondary">最終更新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-body-secondary">最終更新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 text-bg-dark">
  <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）v5.0.2設定変更

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

見本

カードのタイトル

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

最終更新3分前

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

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." alt="..." class="img-fluid rounded-start">
    </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-body-secondary">最終更新3分前</small></p>
      </div>
    </div>
  </div>
</div>

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

<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.g-0 > div.col(-{breakpoint})-*

【変更履歴】

【v5.0.0-alpha1】
- div.row.no-gutters ⇒ div.row.g-0（ガターなしクラスの変更）
【v5.0.2】
- img.card-img ⇒ img.img-fluid.rounded-start
【v5.3.0】
- .text-muted は非推奨になったので .text-body-secondary に変更

カードスタイル（Card styles）

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

カードの背景と色（Background and color）v5.2.0設定変更

.text-bg-{color} ヘルパーを使用して、文字 color とコントラストのある background-color を設定。以前は、選択した .text-{color} ユーティリティと .bg-{color} ユーティリティを手動で組み合わせてスタイリングする必要があったが、必要に応じた使用もできる。

背景色の種類

Primary:.card.text-bg-primary

ヘッダ

Primaryカードタイトル

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

Secondary:.card.text-bg-secondary

ヘッダ

Secondaryカードタイトル

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

Success：.card.text-bg-success

ヘッダ

Successryカードタイトル

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

Danger：.card.text-bg-danger

ヘッダ

Dangerカードタイトル

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

Warning：.card.text-bg-warning

ヘッダ

Warningカードタイトル

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

Info:.card.text-bg-info

ヘッダ

Infoカードタイトル

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

Light：.card.text-bg-light

ヘッダ

Lightカードタイトル

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

Dark：.card.text-bg-dark

ヘッダ

Darkカードタイトル

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

設定なし（参考）

ヘッダ

カードタイトル

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

Bootstrap5.2.0～の設定例緑背景が5.2.0での変更箇所

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

※Bootstrap5.1.xの設定例赤背景が5.2.0での変更箇所

<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 に .text-bg-{themecolor}（文字&背景色ヘルパー、上記の「背景色の種類」から選択）を追加

【変更履歴】

【v5.2.0】
- .card.bg-{themecolor}(.text-white) ⇒ .card.text-bg-{themecolor}

アクセシビリティのヒント：意味を付加するために（"赤"とか"青"とか）カラー名を使用しても、視覚的な表示を提供するだけでスクリーン・リーダーのような支援技術のユーザーには伝わらない。意味は、（十分なカラーコントラストを持つ可視テキストなどの）文脈自体で明白にするか、.visually-hidden クラスで非表示にした追加テキストなどの代替手段を入れるように心がけて下さい。

カードの枠線の色（Border）

境界ユーティリティを使用して、カードの枠線の色のみを変更。.text-{color} クラスは親の .card やカードの内容のサブセットに次のように置ける。

枠線の色の種類

Primary:.card.border-primary > .card-body.text-primary

ヘッダ

Primaryカードタイトル

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

Secondary:.card.border-secondary > .card-body.text-secondary

ヘッダ

Secondaryカードタイトル

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

Success：.card.border-success > .card-body.text-success

ヘッダ

Successryカードタイトル

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

Danger：.card.border-danger > .card-body.text-danger

ヘッダ

Dangerカードタイトル

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

Warning：.card.border-warning > .card-body.text-warning

ヘッダ

Warningカードタイトル

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

Info:.card.border-info > .card-body.text-info

ヘッダ

Infoカードタイトル

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

Light：.card.border-light > .card-body.text-light

ヘッダ

Lightカードタイトル

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

Dark：.card.border-dark > .card-body.text-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}（上記の「枠線の色の種類」から選択）を追加

ミックスインユーティリティ（Mixins utilities）

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

見本

ヘッダ

Successカードタイトル

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

フッタ

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

ヘッダ

Successカードタイトル

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

フッタ

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

ヘッダ

カードタイトル

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

フッタ

裏技2：ヘッダとフッタのみ背景色 v5.2.0設定変更

ヘッダ

カードタイトル

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

フッタ

設定例

<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-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-bg-primary border-primary">フッタ</div>
</div>

【設定】

ヘッダやフッタにも枠線の色を設定する場合は、div.card に .border-{themecolor} を追加して（.card-body に .border-{themecolor} を追加しても無効）、.card-header や .card-footer に .bg-{color} を追加
ヘッダやフッタのデフォルトの背景色を消したい場合は、.card-header や .card-footer に .bg-transparent を追加
ヘッダやフッタのみ背景色を設定する場合は、.card-header や .card-footer に .bg-{color}（背景色ユーティリティ）か .text-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-body-secondary">最終更新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-body-secondary">最終更新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-body-secondary">最終更新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-body-secondary">最終更新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-body-secondary">最終更新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-body-secondary">最終更新3分前</small>
    </div>
  </div>
</div>

【設定】

div.card-group > [div.card] + [div.card]...

【注意】

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

グリッドカード（Grid cards）v5.0.0-alpha1設定変更

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

見本

カードのタイトル

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

カードのタイトル

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

カードのタイトル

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

カードのタイトル

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

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

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <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">
    <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">
    <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">
    <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>

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

<div class="row row-cols-1 row-cols-md-2">
  <div class="col mb-4">
    <div class="card">
      ...
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      ...
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      ...
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      ...
    </div>
  </div>
</div>

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

見本

カードのタイトル

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

カードのタイトル

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

カードのタイトル

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

カードのタイトル

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

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

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <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">
    <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">
    <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">
    <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>

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

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <div class="card">
      ...
  </div>
  <div class="col mb-4">
    <div class="card">
      ...
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      ...
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      ...
    </div>
  </div>
</div>

高さを揃えたいときは、カードに .h-100 を追加する。デフォルトでは同じ高さにしたい場合は、scss/_variables.scss 内で $card-height: 100% に設定して下さい。

見本

カードのタイトル

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

カードのタイトル

これは短いカードです。

カードのタイトル

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

カードのタイトル

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

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

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <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">
    <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">
    <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">
    <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>

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

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <div class="card h-100">
      ...
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      ...
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      ...
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      ...
    </div>
  </div>
</div>

カードグループと同様に、カードフッタも自動的に整列（v4のカードカラムの設定変更）。

見本

カード1のタイトル

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

最終更新3分前

カード2のタイトル

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

最終更新3分前

カード3のタイトル

最終更新3分前

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

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <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-body-secondary">最終更新3分前</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <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-body-secondary">最終更新3分前</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <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-body-secondary">最終更新3分前</small>
      </div>
    </div>
  </div>
</div>

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

<div class="card-deck">
  <div class="card">
    ...
  </div>
  <div class="card">
    ...;
  </div>
  <div class="card">
    ...
  </div>
</div>

【設定】

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

【変更履歴】

【v5.0.0-alpha1】
- div.row.row-cols(-{breakpoint})-* > [div.col > div.card] + [div.col.mb-* > div.card]... ⇒ div.row.row-cols(-{breakpoint})-*.g-*> [div.col > div.card] + [div.col > div.card]...
- v4のカードデッキ：div.card-deck > [div.card] + [div.card]... ⇒ div.row.row-cols(-{breakpoint})-*.g-* > [div.col > div.card.h-100] + [div.col > div.card.h-100]...（.card-deck は廃止）
【v5.3.0】
- フッタ：.text-muted は非推奨になったので .text-body-secondary に変更

Masonryレイアウト v5.3.0設定変更

v4 では、Masonryのようなカードレイアウトを実現するためにCSSのみで設定する手法（v4のカードカラム）を使用していたが、この手法には多くの不具合が生じた。v5 でこのタイプのレイアウトを構築したいなら、Masonryプラグインを利用すれば作成できる。MasonryはBootstrapに組み込まれていないが、参考のため実例にデモを掲載。

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

JavaScriptファイル<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>

HTML<div class="row g-4" data-masonry='{"percentPosition": true }'>
  <div class="col-sm-6 col-lg-4">
    <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>
  <div class="col-sm-6 col-lg-4">
    <div class="card p-3">
      <figure class="p-3 mb-0">
        <blockquote class="blockquote">
          <p>カード2：この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
        </blockquote>
        <figcaption class="blockquote-footer mb-0">
          引用元－ <cite title="ソースのタイトル">ソースのタイトル</cite>
        </figcaption>
      </figure>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4">
    <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-body-secondary">最終更新3分前</small></p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4">
    <div class="card text-bg-primary text-center p-3">
      <figure class="mb-0">
        <blockquote class="blockquote">
          <p>カード4：この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
        </blockquote>
        <figcaption class="blockquote-footer mb-0 text-white">
          引用元－ <cite title="ソースのタイトル">ソースのタイトル</cite>
        </figcaption>
      </figure>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4">
    <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-body-secondary">最終更新3分前</small></p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4">
    <div class="card">
      <img src="..." alt="カード6の画像" class="card-img">
    </div>
  </div>
  <div class="col-sm-6 col-lg-4">
    <div class="card p-3 text-end">
      <figure class="mb-0">
        <blockquote class="blockquote">
          <p>カード7：この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
        </blockquote>
        <figcaption class="blockquote-footer">
          引用元－ <cite title="ソースのタイトル">ソースのタイトル</cite>
        </figcaption>
      </figure>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4">
    <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-body-secondary">最終更新3分前</small></p>
      </div>
    </div>
  </div>
</div>

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

HTML<div class="card-columns">
  <div class="card">
    カード1の設定...
  </div>
  <div class="card p-3">
    カード2の設定...
  </div>
  <div class="card">
    カード3の設定...
  </div>
  <div class="card text-white bg-primary text-center p-3">
    カード4の設定...
  </div>
  <div class="card text-center">
    カード5の設定...
  </div>
  <div class="card">
    カード6の設定...
  </div>
  <div class="card text-right p-3">
    カード7の設定...
  </div>
  <div class="card">
    カード8の設定...
  </div>
</div>

【変更履歴】

【v5.0.0-alpha1】
- div.card-columns > [div.card] + [div.card] ... ⇒ div.row.g-*[data-masonry='{"percentPosition": true }'] > [div.col-* > div.card] + [div.col-* > div.card] ...（.card-columns は廃止）
- 別途MasonryのJSプラグインを読み込ませる必要あり（data-masonry='{"percentPosition": true }' はMasonryの各アイテム幅をパーセント値にする設定）
【v5.0.0-beta1】
- MasonryのCDNの提供元：Cloudflare⇒jsDelivr（BootstrapのCDNに合わせた）
【v5.2.0】
- カード4の設定：.card.bg-primary.text-white ⇒ .card.text-bg-primary
【v5.3.0】
- .text-muted は非推奨になったので .text-body-secondary に変更

CSS v5.0.0-beta3追加、v5.2.0Sassから名称変更

CSS変数（Variables）v5.2.0設定移行

Bootstrapの進化するCSS変数アプローチの一環として、カードは、リアルタイムのカスタマイズを強化するために、.card でローカルCSS変数を使用するようにした。CSS変数の値はSassを経由して設定されるため、Sassのカスタマイズも引き続きサポートされる。

デフォルトの設定

scss/_card.scss 内 card-css-vars の設定--#{$prefix}card-spacer-y: #{$card-spacer-y};
--#{$prefix}card-spacer-x: #{$card-spacer-x};
--#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
--#{$prefix}card-title-color: #{$card-title-color};
--#{$prefix}card-subtitle-color: #{$card-subtitle-color};
--#{$prefix}card-border-width: #{$card-border-width};
--#{$prefix}card-border-color: #{$card-border-color};
--#{$prefix}card-border-radius: #{$card-border-radius};
--#{$prefix}card-box-shadow: #{$card-box-shadow};
--#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
--#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
--#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
--#{$prefix}card-cap-bg: #{$card-cap-bg};
--#{$prefix}card-cap-color: #{$card-cap-color};
--#{$prefix}card-height: #{$card-height};
--#{$prefix}card-color: #{$card-color};
--#{$prefix}card-bg: #{$card-bg};
--#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
--#{$prefix}card-group-margin: #{$card-group-margin};

Sass変数（Sass variables）v5.2.0変数から名称変更

デフォルトの設定

scss/_variables.scss 内 card-variables の設定$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-title-color:                  null;
$card-subtitle-color:               null;
$card-border-width:                 var(--#{$prefix}border-width);
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$card-border-radius:                var(--#{$prefix}border-radius);
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba(var(--#{$prefix}body-color-rgb), .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           var(--#{$prefix}body-bg);
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;

前のページ
ボタングループ

次のページ
カルーセル

カード（Cards）

概要（About）

基本のカードの設定（Example）v5.2.0デザイン変更

見本

カードのタイトル

設定例

【設定】

【変更履歴】

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

ボディ（Body）

見本

設定例

【設定】

タイトル、テキスト、リンク（Titles, text, and links）v5.3.0設定変更

見本

カードのタイトル

カードのサブタイトル

Bootstrap5.3.0の設定例 緑背景が変更箇所

※Bootstrap5.2.xの設定例 赤背景が変更箇所

【設定】

【変更履歴】

イメージ（Images）

見本

設定例

【設定】

リストグループ（List groups）

1. 基本の設定

見本

設定例

2. ヘッダ付き

見本

設定例

3. フッタ付き

見本

設定例

【設定】

引用（Blockquote）v5.0.0-alpha1設定変更

見本

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

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

【設定】

【変更履歴】

すべて投入（Kitchen sink）

見本

カードのタイトル

設定例

【設定】

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

1. div.card-header で設定

見本

カードのタイトル

設定例

2. h*.card-header で設定

見本

カードのヘッダ

カードのタイトル

設定例

3. 引用でのヘッダ v5.0.0-alpha1設定変更

見本

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

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

4. フッタをつけて中央揃えv5.3.0設定変更

見本

カードのタイトル

Bootstrap5.3.0の設定例 緑背景が変更箇所

※Bootstrap5.2.xの設定例 赤背景が変更箇所

【設定】

【変更履歴】

カードの幅サイズ（Sizing）

グリッドマークアップの使用（Using grid markup）v5.3.0設定変更

見本

カードのタイトル

カードのタイトル

Bootstrap5.xの設定例 緑背景が5.3.0での変更箇所

【設定】

【変更履歴】

ユーティリティの使用（Using utilities）v5.3.0設定変更

見本

カードのタイトル

カードのタイトル

Bootstrap5.3.0の設定例緑背景が変更箇所

※Bootstrap5.2.xの設定例赤背景が変更箇所

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

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

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

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

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

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

Bootstrap5.3.0の設定例緑背景が変更箇所

※Bootstrap5.2.xの設定例赤背景が変更箇所

Bootstrap5.xの設定例緑背景が5.3.0での変更箇所

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

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

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

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

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

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

Bootstrap5.2.0～の設定例緑背景が5.2.0での変更箇所

※Bootstrap5.1.xの設定例赤背景が5.2.0での変更箇所