Source

カード

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

約

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

例

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

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

100%×180
カードのタイトル

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

どこかへ行きます 
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/" alt="Card image cap">
  <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. カード内にパディング セクションが必要な場合はいつでも使用してください。

これは、カード本体内のテキストです。 
<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、カードのタイトルとサブタイトルがうまく配置されます。

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

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

カードリンク 別のリンク 
<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 タグを使用してスタイルを設定することもできます。

画像キャップ [100%x180]

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

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <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>

グループの一覧表示

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

  • クラス・フスト・オディオ
  • Dapibus ac ファシリシス
  • エロスの前庭
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
特徴
  • クラス・フスト・オディオ
  • Dapibus ac ファシリシス
  • エロスの前庭
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

台所の流し

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

画像キャップ [100%x180]
カードのタイトル

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

  • クラス・フスト・オディオ
  • Dapibus ac ファシリシス
  • エロスの前庭
カードリンク 別のリンク 
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <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">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

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

特徴
タイトルの特別扱い

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

どこかへ行きます 
<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*>

特徴
タイトルの特別扱い

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

どこかへ行きます 
<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>
見積もり

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 整数は前もって計算します。

ソースタイトル で有名な人 
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
特徴
タイトルの特別扱い

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

どこかへ行きます
2日前 
<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 ミックスイン、またはユーティリティを使用して、必要に応じてこれを変更できます。

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

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

タイトルの特別扱い

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

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

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

どこかへ行きます 
<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>

ユーティリティの使用

カードの幅をすばやく設定するには、いくつかの利用可能なサイジング ユーティリティを使用します。

カードのタイトル

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

ボタン
カードのタイトル

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

ボタン 
<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 を使用するか、インライン スタイルとして幅を設定します。

タイトルの特別扱い

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

どこかへ行きます 
<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" 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-right" 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 のナビゲーション コンポーネントを使用して、カードのヘッダー (またはブロック) にナビゲーションを追加します。

タイトルの特別扱い

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

どこかへ行きます 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">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>
タイトルの特別扱い

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

どこかへ行きます 
<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" href="#">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>

画像

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

画像キャップ

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

100%×180
カードのタイトル

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

最終更新: 3 分前

カードのタイトル

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

最終更新: 3 分前

100%×180 
<div class="card mb-3">
  <img class="card-img-top" src=".../100px180/" alt="Card image cap">
  <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 class="card-img-bottom" src=".../100px180/" alt="Card image cap">
</div>

画像オーバーレイ

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

100%x270
カードのタイトル

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

最終更新: 3 分前

<div class="card bg-dark text-white">
  <img class="card-img" src=".../100px270/#55595c:#373a3c/text:Card image" alt="Card image">
  <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">Last updated 3 mins ago</p>
  </div>
</div>

カードのスタイル

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

背景と色

テキストおよび背景ユーティリティを使用して、カードの外観を変更します。

ヘッダ
メインカードのタイトル

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

ヘッダ
サブカードのタイトル

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

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

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

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

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

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

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

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

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

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

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

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

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

<div class="card text-white 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-white 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-white 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-white 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-white 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-white 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 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-white 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>
支援技術に意味を伝える

色を使用して意味を追加しても、視覚的な指示しか提供されず、スクリーン リーダーなどの支援技術のユーザーには伝わりません。.sr-only色で示される情報が、コンテンツ自体 (表示されるテキストなど) から明らかであるか、クラスで非表示の追加テキストなどの代替手段によって含まれていることを確認してください。

国境

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

ヘッダ
メインカードのタイトル

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

ヘッダ
サブカードのタイトル

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

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

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

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

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

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

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

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

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

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

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

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

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

<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 text-warning">
    <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 text-info">
    <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.

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

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

フッター 
<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;、均一なサイジングを実現するために使用します。

100%×180
カードのタイトル

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

最終更新: 3 分前

100%×180
カードのタイトル

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

最終更新: 3 分前

100%×180
カードのタイトル

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

最終更新: 3 分前

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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>

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

100%×180
カードのタイトル

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

最終更新: 3 分前
100%×180
カードのタイトル

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

最終更新: 3 分前
100%×180
カードのタイトル

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

最終更新: 3 分前 
<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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>

カードデッキ

互いにくっついていない同じ幅と高さのカードのセットが必要ですか? カードデッキを使用。

100%×200
カードのタイトル

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

最終更新: 3 分前

100%×200
カードのタイトル

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

最終更新: 3 分前

100%×200
カードのタイトル

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

最終更新: 3 分前

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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>

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

100%×180
カードのタイトル

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

最終更新: 3 分前
100%×180
カードのタイトル

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

最終更新: 3 分前
100%×180
カードのタイトル

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

最終更新: 3 分前 
<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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>

カード列

カードをでラップすることにより、CSS だけで組積造のような列に編成できます.card-columns。カードはcolumn、簡単に配置できるように、フレックスボックスではなく CSS プロパティで構築されています。カードは上から下、左から右に並べられています。

注意喚起！カード列のマイレージは異なる場合があります。カードが列をまたいで壊れないようにするために、それらをdisplay: inline-blockasに設定する必要がありますが、これcolumn-break-inside: avoidはまだ防弾ソリューションではありません。

100%x160
新しい行に折り返されるカード タイトル

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 整数は前もって計算します。

ソースタイトルで有名な人
100%x160
カードのタイトル

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

最終更新: 3 分前

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 整数 posuere erat。

ソースタイトルで有名な人
カードのタイトル

このカードには、通常のタイトルと、その下に短い段落のテキストがあります。

最終更新: 3 分前

100%x260

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 整数は前もって計算します。

ソースタイトルで有名な人
カードのタイトル

これは別のカードで、下にタイトルとサポート テキストがあります。このカードには、全体的に少し高くするための追加コンテンツがいくつかあります。

最終更新: 3 分前

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src=".../100px160/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</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 class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px160/" alt="Card image cap">
    <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 bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img" src=".../100px260/" alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

カード列は、コードを追加して拡張およびカスタマイズすることもできます。以下に示すのは、.card-columns私たちが使用するのと同じ CSS (CSS 列) を使用して、列の数を変更するためのレスポンシブ層のセットを生成するクラスの拡張です。

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