カード

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

このページでは

約

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

例

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

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

カードのタイトル

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

どこかへ行きます

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 タグを使用してスタイルを設定することもできます。

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

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>

台所の流し

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

カードのタイトル

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

アイテム
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>

特徴

タイトルの特別扱い

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

どこかへ行きます

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-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>

画像

カードには、画像を操作するためのいくつかのオプションが含まれています。カードの両端に「画像キャップ」を追加するか、画像をカードコンテンツに重ねるか、単純に画像をカードに埋め込むかを選択します。

画像キャップ

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

カードのタイトル

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

最終更新: 3 分前

カードのタイトル

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

最終更新: 3 分前

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>

画像オーバーレイ

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

カードのタイトル

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

最終更新: 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

カードのタイトル

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

最終更新: 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

カードのタイトル

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

最終更新: 3 分前

カードのタイトル

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

最終更新: 3 分前

カードのタイトル

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

最終更新: 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>

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

カードのタイトル

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

最終更新: 3 分前

カードのタイトル

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

最終更新: 3 分前

カードのタイトル

最終更新: 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-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 枚のカードを複数の行にまたがって同じ幅になるように分割しています。

カードのタイトル

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

カードのタイトル

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

カードのタイトル

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

カードのタイトル

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

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 番目のカードラップが表示されます。

カードのタイトル

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

カードのタイトル

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

カードのタイトル

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

カードのタイトル

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

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 で設定できます。

カードのタイトル

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

カードのタイトル

ショートカードです。

カードのタイトル

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

カードのタイトル

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

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>

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

カードのタイトル

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

最終更新: 3 分前

カードのタイトル

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

最終更新: 3 分前

カードのタイトル

最終更新: 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-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;

カード

約

例

カードのタイトル

コンテンツ タイプ

体

タイトル、テキスト、およびリンク

カードのタイトル

カードのサブタイトル

画像

グループの一覧表示

台所の流し

カードのタイトル

ヘッダーとフッター

タイトルの特別扱い

特徴

タイトルの特別扱い

タイトルの特別扱い

サイジング

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

タイトルの特別扱い

タイトルの特別扱い

ユーティリティの使用

カードのタイトル

カードのタイトル

カスタム CSS の使用

タイトルの特別扱い

テキストの配置

タイトルの特別扱い

タイトルの特別扱い

タイトルの特別扱い

ナビゲーション

タイトルの特別扱い

タイトルの特別扱い

画像

画像キャップ

カードのタイトル

カードのタイトル

画像オーバーレイ

カードのタイトル

水平

カードのタイトル

カードのスタイル

背景と色

メインカードのタイトル

サブカードのタイトル

成功カードのタイトル

危険カードのタイトル

警告カードのタイトル

情報カードのタイトル

ライトカードのタイトル

ダークカードのタイトル

支援技術に意味を伝える

国境

メインカードのタイトル

サブカードのタイトル

成功カードのタイトル

危険カードのタイトル

警告カードのタイトル

情報カードのタイトル

ライトカードのタイトル

ダークカードのタイトル

Mixins ユーティリティ

成功カードのタイトル

カードのレイアウト

カードグループ

カードのタイトル

カードのタイトル

カードのタイトル

カードのタイトル

カードのタイトル

カードのタイトル

グリッドカード

カードのタイトル

カードのタイトル

カードのタイトル

カードのタイトル

カードのタイトル

カードのタイトル

カードのタイトル

コンテンツタイプ

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