メインコンテンツにスキップ ドキュメントナビゲーションにスキップ
GitHubで表示

カード

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

このページの内容

Bootstrapについて

カードは、柔軟で拡張可能なコンテンツコンテナです。ヘッダーとフッター、さまざまなコンテンツ、コンテキストに応じた背景色、強力な表示オプションなどを備えています。Bootstrap 3に精通している場合、カードは以前のパネル、ウェル、サムネイルに代わるものです。これらのコンポーネントと同様の機能は、カードの修飾子クラスとして利用できます。

例

カードは、できるだけ少ないマークアップとスタイルで構築されていますが、それでも多くの制御とカスタマイズを提供できます。フレックスボックスで構築されているため、簡単に配置でき、他のBootstrapコンポーネントともうまく組み合わせることができます。デフォルトではmarginがないため、必要に応じてスペーシングユーティリティを使用してください。

以下は、混合コンテンツと固定幅を持つ基本的なカードの例です。カードは開始時に固定幅がないため、親要素の全幅に自然に収まります。これは、さまざまなサイズ変更オプションで簡単にカスタマイズできます。

Placeholder Image cap
カードのタイトル

カードのタイトルに基づいて構築し、カードのコンテンツの大部分を構成する簡単なサンプルテキストです。

どこかへ行く
html 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

コンテンツタイプ

カードは、画像、テキスト、リストグループ、リンクなど、さまざまなコンテンツをサポートしています。以下は、サポートされているものの例です。

本文

カードの構成要素は、.card-bodyです。カード内でパディングされたセクションが必要な場合は、いつでも使用してください。

これはカード本文内のテキストです。
html 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

タイトル、テキスト、リンク

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

サブタイトルは、<h*>タグに.card-subtitleを追加することで使用されます。.card-titleと.card-subtitleの項目が.card-body項目に配置されている場合、カードのタイトルとサブタイトルはきれいに配置されます。

カードのタイトル
カードのサブタイトル

カードのタイトルに基づいて構築し、カードのコンテンツの大部分を構成する簡単なサンプルテキストです。

カードリンク 別のリンク
html 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

画像

.card-img-topと.card-img-bottomは、それぞれカードの境界線に合わせて上下の角を丸くします。.card-textを使用すると、カードにテキストを追加できます。.card-text内のテキストは、標準のHTMLタグでスタイルを設定することもできます。

Placeholder Image cap

カードのタイトルに基づいて構築し、カードのコンテンツの大部分を構成する簡単なサンプルテキストです。

html 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

リストグループ

フラッシュリストグループを使用して、カード内にコンテンツのリストを作成します。

  • アイテム
  • 2番目のアイテム
  • 3番目のアイテム
html 
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
注目のアイテム
  • アイテム
  • 2番目のアイテム
  • 3番目のアイテム
html 
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
  • アイテム
  • 2番目のアイテム
  • 3番目のアイテム
カードフッター
html 
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

キッチシンク

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

Placeholder Image cap
カードのタイトル

カードのタイトルに基づいて構築し、カードのコンテンツの大部分を構成する簡単なサンプルテキストです。

  • アイテム
  • 2番目のアイテム
  • 3番目のアイテム
カードリンク 別のリンク
html 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

カード内にオプションのヘッダーまたはフッター（あるいはその両方）を追加します。

注目のアイテム
特別なタイトル処理

追加コンテンツへの自然な導入として、下に補助テキストがあります。

どこかへ行く
html 
<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

カードヘッダーは、<h*>要素に.card-headerを追加することでスタイルを設定できます。

注目のアイテム
特別なタイトル処理

追加コンテンツへの自然な導入として、下に補助テキストがあります。

どこかへ行く
html 
<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
引用

blockquote要素に含まれる有名な引用です。

出典の有名人
html 
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
注目のアイテム
特別なタイトル処理

追加コンテンツへの自然な導入として、下に補助テキストがあります。

どこかへ行く
2日前
html 
<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-body-secondary">
    2 days ago
  </div>
</div>

サイズ変更

カードは、開始時に特定のwidthを想定していないため、特に指定がない限り100%幅になります。これは、カスタムCSS、グリッドクラス、グリッドSass mixin、またはユーティリティを使用して必要に応じて変更できます。

グリッドマークアップの使用

グリッドを使用して、必要に応じてカードをカラムと行にラップします。

特別なタイトル処理

追加コンテンツへの自然な導入として、下に補助テキストがあります。

どこかへ行く
特別なタイトル処理

追加コンテンツへの自然な導入として、下に補助テキストがあります。

どこかへ行く
html 
<div class="row">
  <div class="col-sm-6 mb-3 mb-sm-0">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

ユーティリティの使用

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

カードのタイトル

追加コンテンツへの自然な導入として、下に補助テキストがあります。

ボタン
カードのタイトル

追加コンテンツへの自然な導入として、下に補助テキストがあります。

ボタン
html 
<div class="card w-75 mb-3">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

カスタムCSSの使用

スタイルシートでカスタムCSSを使用するか、インラインスタイルとして使用して幅を設定します。

特別なタイトル処理

追加コンテンツへの自然な導入として、下に補助テキストがあります。

どこかへ行く
html 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

テキストの配置

テキスト配置クラスを使用して、カード全体のテキスト配置、または特定の部分のテキスト配置をすばやく変更できます。

特別なタイトル処理

追加コンテンツへの自然な導入として、下に補助テキストがあります。

どこかへ行く
特別なタイトル処理

追加コンテンツへの自然な導入として、下に補助テキストがあります。

どこかへ行く
特別なタイトル処理

追加コンテンツへの自然な導入として、下に補助テキストがあります。

どこかへ行く
html 
<div class="card mb-3" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center mb-3" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-end" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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

特別なタイトル処理

追加コンテンツへの自然な導入として、下に補助テキストがあります。

どこかへ行く
html 
<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="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
特別なタイトル処理

追加コンテンツへの自然な導入として、下に補助テキストがあります。

どこかへ行く
html 
<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="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

画像

カードには、画像を操作するためのオプションがいくつかあります。カードの両端に「画像キャップ」を追加するか、カードコンテンツで画像をオーバーレイするか、単に画像をカードに埋め込むかを選択できます。

画像キャップ

ヘッダーとフッターと同様に、カードには上下の「画像キャップ」（カードの上部または下部の画像）を含めることができます。

Placeholder Image cap
カードのタイトル

これは、追加コンテンツへの自然な導入として、下に補助テキストがある幅の広いカードです。このコンテンツは少し長いです。

最終更新：3分前

カードのタイトル

これは、追加コンテンツへの自然な導入として、下に補助テキストがある幅の広いカードです。このコンテンツは少し長いです。

最終更新：3分前

Placeholder Image cap
html 
<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
  </div>
  <img src="..." class="card-img-bottom" alt="...">
</div>

画像オーバーレイ

画像をカードの背景に変換し、カードのテキストをオーバーレイします。画像によっては、追加のスタイルやユーティリティが必要になる場合と必要ない場合があります。

Placeholder Card image
カードのタイトル

これは、追加コンテンツへの自然な導入として、下に補助テキストがある幅の広いカードです。このコンテンツは少し長いです。

最終更新：3分前

html 
<div class="card text-bg-dark">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small>Last updated 3 mins ago</small></p>
  </div>
</div>
コンテンツは画像の高さより大きくしないでください。コンテンツが画像より大きい場合、コンテンツは画像の外側に表示されます。

水平方向

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

Placeholder Image
カードのタイトル

これは、追加コンテンツへの自然な導入として、下に補助テキストがある幅の広いカードです。このコンテンツは少し長いです。

最終更新：3分前

html 
<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

カードスタイル

カードには、背景、境界線、色をカスタマイズするためのさまざまなオプションがあります。

背景と色

v5.2.0で追加

コントラストのある前景のcolorを持つbackground-colorを.text-bg-{color}ヘルパーで設定します。以前は、スタイルを設定するために.text-{color}と.bg-{color}ユーティリティの組み合わせを手動で選択する必要がありましたが、必要であれば今でも使用できます。

ヘッダー
プライマリカードタイトル

カードのタイトルに基づいて構築し、カードのコンテンツの大部分を構成する簡単なサンプルテキストです。

ヘッダー
セカンダリカードタイトル

カードのタイトルに基づいて構築し、カードのコンテンツの大部分を構成する簡単なサンプルテキストです。

ヘッダー
成功カードタイトル

カードのタイトルに基づいて構築し、カードのコンテンツの大部分を構成する簡単なサンプルテキストです。

ヘッダー
危険カードタイトル

カードのタイトルに基づいて構築し、カードのコンテンツの大部分を構成する簡単なサンプルテキストです。

ヘッダー
警告カードタイトル

カードのタイトルに基づいて構築し、カードのコンテンツの大部分を構成する簡単なサンプルテキストです。

ヘッダー
情報カードタイトル

カードのタイトルに基づいて構築し、カードのコンテンツの大部分を構成する簡単なサンプルテキストです。

ヘッダー
ライトカードタイトル

カードのタイトルに基づいて構築し、カードのコンテンツの大部分を構成する簡単なサンプルテキストです。

ヘッダー
ダークカードタイトル

カードのタイトルに基づいて構築し、カードのコンテンツの大部分を構成する簡単なサンプルテキストです。

html 
<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
アクセシビリティのヒント：色を使用して意味を追加すると、視覚的な表示のみが提供され、スクリーンリーダーなどの支援技術のユーザーには伝わりません。十分な色コントラストを持つ表示テキストなど、コンテンツ自体から意味が明確であるか、.visually-hiddenクラスで非表示にされた追加テキストなどの代替手段によって含まれていることを確認してください。

ボーダー

ボーダーユーティリティを使用して、カードのborder-colorのみを変更します。.text-{color}クラスは、親の.cardまたは以下に示すようにカードのコンテンツのサブセットに配置できることに注意してください。

ヘッダー
プライマリカードタイトル

カードのタイトルに基づいて構築し、カードのコンテンツの大部分を構成する簡単なサンプルテキストです。

ヘッダー
セカンダリカードタイトル

カードのタイトルに基づいて構築し、カードのコンテンツの大部分を構成する簡単なサンプルテキストです。

ヘッダー
成功カードタイトル

カードのタイトルに基づいて構築し、カードのコンテンツの大部分を構成する簡単なサンプルテキストです。

ヘッダー
危険カードタイトル

カードのタイトルに基づいて構築し、カードのコンテンツの大部分を構成する簡単なサンプルテキストです。

ヘッダー
警告カードタイトル

カードのタイトルに基づいて構築し、カードのコンテンツの大部分を構成する簡単なサンプルテキストです。

ヘッダー
情報カードタイトル

カードのタイトルに基づいて構築し、カードのコンテンツの大部分を構成する簡単なサンプルテキストです。

ヘッダー
ライトカードタイトル

カードのタイトルに基づいて構築し、カードのコンテンツの大部分を構成する簡単なサンプルテキストです。

ヘッダー
ダークカードタイトル

カードのタイトルに基づいて構築し、カードのコンテンツの大部分を構成する簡単なサンプルテキストです。

html 
<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Mixinユーティリティ

必要に応じて、カードのヘッダーとフッターのボーダーを変更したり、.bg-transparentを使用してbackground-colorを削除したりすることもできます。

ヘッダー
成功カードタイトル

カードのタイトルに基づいて構築し、カードのコンテンツの大部分を構成する簡単なサンプルテキストです。

フッター
html 
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

カードレイアウト

カード内のコンテンツのスタイル設定に加えて、Bootstrapには、一連のカードをレイアウトするためのオプションがいくつか含まれています。今のところ、これらのレイアウトオプションはまだレスポンシブではありません。

カードグループ

カードグループを使用して、カードを幅と高さの等しい列を持つ単一の添付要素としてレンダリングします。カードグループはスタックされて開始され、smブレークポイントから開始して、均一な寸法でアタッチされるためにdisplay: flex;を使用します。

Placeholder Image cap
カードのタイトル

これは、追加コンテンツへの自然な導入として、下に補助テキストがある幅の広いカードです。このコンテンツは少し長いです。

最終更新：3分前

Placeholder Image cap
カードのタイトル

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

最終更新：3分前

Placeholder Image cap
カードのタイトル

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

最終更新：3分前

html 
<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

フッター付きのカードグループを使用すると、コンテンツは自動的に整列されます。

Placeholder Image cap
カードのタイトル

これは、追加コンテンツへの自然な導入として、下に補助テキストがある幅の広いカードです。このコンテンツは少し長いです。

最終更新：3分前
Placeholder Image cap
カードのタイトル

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

最終更新：3分前
Placeholder Image cap
カードのタイトル

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

最終更新：3分前
html 
<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-body-secondary">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-body-secondary">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-body-secondary">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

グリッドカード

Bootstrapグリッドシステムとその.row-colsクラスを使用して、行ごとに表示するグリッド列（カードの周りにラップされている）の数を制御します。たとえば、ここでは、.row-cols-1が1つの列にカードをレイアウトし、.row-cols-md-2が4つのカードを中程度のブレークポイントから複数の行に均等に分割しています。

Placeholder Image cap
カードのタイトル

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

Placeholder Image cap
カードのタイトル

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

Placeholder Image cap
カードのタイトル

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

Placeholder Image cap
カードのタイトル

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

html 
<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

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

Placeholder Image cap
カードのタイトル

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

Placeholder Image cap
カードのタイトル

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

Placeholder Image cap
カードのタイトル

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

Placeholder Image cap
カードのタイトル

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

html 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

等しい高さが必要な場合は、カードに.h-100を追加します。デフォルトで等しい高さにする場合は、Sassで$card-height: 100%を設定できます。

Placeholder Image cap
カードのタイトル

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

Placeholder Image cap
カードのタイトル

これは短いカードです。

Placeholder Image cap
カードのタイトル

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

Placeholder Image cap
カードのタイトル

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

html 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

カードグループと同様に、カードフッターは自動的に整列されます。

Placeholder Image cap
カードのタイトル

これは、追加コンテンツへの自然な導入として、下に補助テキストがある幅の広いカードです。このコンテンツは少し長いです。

最終更新：3分前
Placeholder Image cap
カードのタイトル

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

最終更新：3分前
Placeholder Image cap
カードのタイトル

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

最終更新：3分前
html 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-body-secondary">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <small class="text-body-secondary">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
      <div class="card-footer">
        <small class="text-body-secondary">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

Masonry

v4では、CSSのみの手法を使用してMasonryのような列の動作を模倣しましたが、この手法には多くの不快な副作用がありました。v5でこのタイプのレイアウトを使用する場合は、Masonryプラグインを使用するだけです。 MasonryはBootstrapには含まれていませんが、開始に役立つデモ例を作成しました。

CSS

変数

v5.2.0で追加

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

scss/_card.scss 
--#{$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変数

scss/_variables.scss 
$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;