メインコンテンツにスキップ ドキュメント ナビゲーションにスキップ
Check
in English

カード

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>

カードタイトルはタグ.card-titleに付けて使用します。同様に、タグ<h*>に追加することで、リンクが追加され、隣り合わせに配置されます。.card-link<a>

.card-subtitle字幕は、<h*>タグにa を追加して使用します。.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-muted">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-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>

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

特徴
タイトルの特別扱い

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

どこかへ行きます
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>
特徴
タイトルの特別扱い

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

どこかへ行きます
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-muted">
    2 days ago
  </div>
</div>

サイジング

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

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

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

タイトルの特別扱い

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

どこかへ行きます
タイトルの特別扱い

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

どこかへ行きます
html
<div class="row">
  <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 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">
  <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" 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" 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">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">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-muted">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-muted">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-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

カードのスタイル

カードには、背景、境界線、および色をカスタマイズするためのさまざまなオプションが含まれています。

背景と色

v5.2.0 で追加

ヘルパーbackground-colorで対照的な前景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 text-dark">
    <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>

Mixins ユーティリティ

必要に応じて、カードのヘッダーとフッターの境界線を変更したりbackground-color.bg-transparent.

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

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

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 には、カード内のコンテンツのスタイルを設定するだけでなく、一連のカードをレイアウトするためのオプションがいくつか含まれています。当面の間、これらのレイアウト オプションはまだ対応していません

カードグループ

カード グループを使用して、同じ幅と高さの列を持つ単一の添付要素としてカードをレンダリングします。カード グループは積み重ねられた状態から始まり、ブレークポイントdisplay: flex;から始まる均一な寸法で接続されます。sm

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-muted">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-muted">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-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

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

Placeholder Image cap
カードのタイトル

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

Placeholder Image cap
カードのタイトル

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

Placeholder Image cap
カードのタイトル

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

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-muted">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-muted">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-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

グリッドカード

Bootstrap グリッド システムとその.row-colsクラスを使用して、行ごとに表示するグリッド列 (カードにラップする) の数を制御します。たとえば、ここで.row-cols-1はカードを 1 列に配置し、.row-cols-md-24 枚のカードを複数の行にまたがって同じ幅になるように分割しています。

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、カードに追加します。デフォルトで同じ高さが必要な場合は$card-height: 100%、Sass で設定できます。

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
カードのタイトル

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

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 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-muted">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-muted">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-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

石積み

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

CSS

変数

v5.2.0 で追加

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

  --#{$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-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};
  

サス変数

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$card-border-radius:                $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($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;